div随屏幕滚动到一定高度后固定

最新推荐文章于 2024-05-16 17:14:39 发布

原创最新推荐文章于 2024-05-16 17:14:39 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的页面滚动导航效果。当用户滚动页面时，导航菜单会根据位置自动变为固定显示或随页面滚动。该功能通过监听滚动事件并获取当前滚动高度来判断导航菜单的位置变化。

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

<body>
<a name="top" id="top"></a>    //放在最高处

   <div>
      <div></div> 
   </div>


   <div class='catalog-side'>
      <div class='catalog-main'>
          <div></div>
          <div class='catalog-menu'>
            <a href="#top">返回顶部</a>
          </div>
      </div>
   </div>
<script>
   var oInfo = $(".catalog-side");
   var oTop = $(".catalog-main").offset().top;
   var sTop = 0;
   $(window).scroll(function(){
      sTop = $(this).scrollTop();//当前滚动高度
      oInfo.text(sTop + '-' + oTop);//这一句 只是为了看看数据 没有多大的用处
      if(sTop >= oTop){//当滚动高度要大于固定div高度时
         $(".catalog-menu").css({"position":"fixed","top":"0"});
      }else{
      $(".catalog-menu").css({"position":"static"});
    }
   });
</script>
</body>