js实现顶部悬停效果

最新推荐文章于 2022-04-21 17:27:13 发布

原创

最新推荐文章于 2022-04-21 17:27:13 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

这段代码展示了如何使用JS和CSS实现一个顶部悬浮的效果。HTML结构包括一个搜索框和固定在顶部的导航条。当页面滚动超过一定距离时，导航条会隐藏，显示一个简化版的悬浮条。CSS用于设置样式，JS则监听页面滚动事件，动态改变悬浮元素的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//gif是横盘把头歪着看会好点 //！！！！！！！！！！

<!doctype html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="{$resource}/css/mui.min.css" rel="stylesheet" />
   </head>
   <style type="text/css">
       body,.mui-content{
           background: white;
       }
       .shop-img-box{
           width: 100%;
           height: 120px;
           background-image: url({$resource}/images/shopbg.jpg);
           background-size: 100% 100%;
           position: relative;
       }
       .mui-action-back{
           margin-top: 12px;
           color: white;
           margin-left: 2%;
           margin-right: 5px;
       }
       .search-box{
           height: 38px;
           display: flex;
           border-bottom: 1px solid white;
           margin-right: 3%;
       }
       .srach-img{
           height: 20px;
           width: 20px;
           margin-top: 11px;
           margin-right: 10px;
       }
       .search-input{
           border: none;
           background: none;
           margin-top: 11px;