仿腾讯固定导航栏

本文转载自查看原文 2018-01-01 22:18 1302

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>防腾讯固定导航栏</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .main{
 9             width: 1000px;
10             margin:0 auto;
11             margin-top: 20px;
12         }
13     </style>
14     <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             var H = $(".top").height();
18             $(window).scroll(function () {
19                 var docSccrollTop = $(document).scrollTop();
20                 if(docSccrollTop > H){
21                     $(".nav").css({"position":"fixed","top":0});
22                     // 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20
23                     $(".main").css("margin-top",106);
24                 }else{
25                     $(".nav").css({"position":"static"});  /*静态定位*/
26                     $(".main").css("margin-top",20);
27                 }
28             });
29         });
30     </script>
31 </head>
32 <body>
33 <div class="top">
34     <img src="images/top.png" />
35 </div>
36 <div class="nav">
37     <img src="images/nav.png" />
38 
39 </div>
40 <div class="main">
41     <img src="images/main.png" />
42 </div>
43 </body>
44 </html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 左侧固定导航栏 MUI 固定底部导航栏仿腾讯课堂固定滚动列表ReactNative组件 Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航 js滚动到指定位置导航栏固定顶部导航栏滚动到顶部后固定【jeecgboot】修改默认固定首页导航栏样式移动端底部导航栏固定——兼容IOS 导航栏 React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）