婺源旅游网 - 最美乡村 - 婺源民间故事 › =乡村情缘= › 家长里短 › 窗口滚动，导航条吸顶后导航栏样式变化代码 ...
返回列表 发新帖

窗口滚动，导航条吸顶后导航栏样式变化代码

[复制链接]
田野 发表于 2021-3-13 16:51:20 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
窗口滚动一定距离后，导航栏部分布局发生变化，固定到窗口顶部，且始终不变。再次回滚后，导航栏布局恢复。

代码如下：
  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>
复制代码


滚动前后对比图


滚动前



滚动后



discuz 导航吸顶 导航栏固定

相关帖子

一旦立下目标，不达目标绝不罢手，方可成功。
回复

举报

返回列表 发表新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

田野管理员

关注0

粉丝0

帖子194

发布主题
最新发布
本版导读
一周热帖排行最近7x24小时热帖
东方财富机构监控和散户监控指标
流水线图形量化交易系统

微信二维码

扫一扫Get更多资讯

Powered by 最美乡村! © 婺源旅游 | ( 赣ICP备19013634号 )|网站地图| 赣公网安备 36113002000140号i> | 👀 | 👦 | 📄

GMT+8, 2025-2-5 21:01 , Processed in 0.044992 second(s), 35 queries .