吸顶条简易

最新推荐文章于 2022-10-11 11:37:17 发布

Guo小阳*

最新推荐文章于 2022-10-11 11:37:17 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_41602101/article/details/89520661

版权

html+css附下

 <html>
      <head>
          <meta charset="UTF-8">
          <title>js滚动到指定位置导航栏固定顶部</title>
          <style type="text/css">
               body{height: 2500px; margin: 0; padding: 0;}
              .banner{height: 250px; width: 100%; background: #e5e5e5;}
             .bignav{width: 100%; background: #000;}
            .nav{ background:#000; width: 1200px; margin: 0 auto; height: 45px;}
             .nav a{display: block; width: 200px;float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px;}
        </style>
     </head>
     <body>
        <div class="banner">
             
         </div>
       <div class="bignav" id="bignav">
          <div class="nav">
               <a href="#">首页</a>
                 <a href="#">首页</a>
                <a href="#">首页</a>                
                 <a href="#">首页</a>
                 <a href="#">首页</a>
                 <a href="#">首页</a>
             </div>
      </div
     </body>
     </html>

源生

 <script type="text/javascript">
             window.onscroll=function(){
                var topScroll =document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离,距离顶部的距离
               var bignav  = document.getElementById("bignav");//获取到导航栏id
                 if(topScroll > 250){  //当滚动距离大于250px时执行下面的东西
                     bignav.style.position = 'fixed';
                     bignav.style.top = '0';
                     bignav.style.zIndex = '9999';
                }else{//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
                     bignav.style.position = 'static';               }
             }
         </script>

jQuery

<script type="text/javascript">
     $(function(){
        $(window).scroll(function(){
          var topScroll=$(document).scrollTop();
            if(topScroll>250){
               $("#bignav").css({position:"fixed",top:"0",zIndex:"99"})
            }else{
         $("#bignav").css({position:"static"})
            }
        })
     })
     </script>

Guo小阳*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
吸顶条简易

html+css附下 <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{hei...
复制链接

扫一扫

吸顶条 简易

吸顶条简易