婺源旅游网 - 最美乡村 - 婺源民间故事

标题: 窗口滚动，导航条吸顶后导航栏样式变化代码 [打印本页]
作者: 田野    时间: 2021-3-13 16:51
标题: 窗口滚动，导航条吸顶后导航栏样式变化代码
窗口滚动一定距离后，导航栏部分布局发生变化，固定到窗口顶部，且始终不变。再次回滚后，导航栏布局恢复。

代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">

  4.         <head>
  5.                 <meta charset="UTF-8" />
  6.                 <title>滚动一定距离导航栏固定</title>
  7.                 <style type="text/css">
  8.                         * {
  9.                                 margin: 0;
  10.                                 padding: 0;
  11.                                 font-size: 40px;
  12.                                 font-family: '微软雅黑';
  13.                                 text-align: center;
  14.                                 line-height: 100px;
  15.                                 width: 100%;
  16.                         }
  17.                         /*顶部*/
  18.                         
  19.                         .top {
  20.                                 height: 100px;
  21.                                 background: blue;
  22.                         }
  23.                         /*导航栏部分*/
  24.                         
  25.                         .nav {
  26.                                 height: 100px;
  27.                                 background: red;
  28.                         }
  29.                         /*导航栏变异部分*/
  30.                         
  31.                         .nav2 {
  32.                                 height: 100px;
  33.                                 background: yellowgreen;
  34.                         }
  35.                         /*测试部分*/
  36.                         
  37.                         .test {
  38.                                 background: #6495ED;
  39.                                 height: 2000px;
  40.                                 padding-top: 100px;
  41.                         }
  42.                         
  43.                         .fixnav {
  44.                                 position: fixed;
  45.                                 top: 0px;
  46.                                 left: 0px;
  47.                         }
  48.                 </style>
  49.         </head>

  51.         <body>
  52.                 <div class="top">顶部</div>
  53.                 <div class="nav">导航栏部分</div>
  54.                 <div class="nav2">导航栏变异部分</div>
  55.                 <div class="test">这个区域仅仅是用于测试的</div>
  56.         </body>

  58. </html>
  59. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  60. <script type="text/javascript">
  61.         $(function() {
  62.                 $(".nav2").hide();
  63.                 $(window).scroll(function() {
  64.                         if($(document).scrollTop() >= 200) {
  65.                                 $(".nav2").addClass("fixnav").slideDown();
  66.                         } else {
  67.                                 $(".nav2").hide();
  68.                         }
  69.                 })
  70.         })
  71. </script>
复制代码


滚动前后对比图


滚动前



滚动后







欢迎光临 婺源旅游网 - 最美乡村 - 婺源民间故事 (https://www.wy166.com/) Powered by Discuz! X3.5