scroll（）实现导航栏跟随滚动

最新推荐文章于 2024-11-05 11:48:14 发布

x-man0

最新推荐文章于 2024-11-05 11:48:14 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页制作前端 jQuery

本文链接：https://blog.youkuaiyun.com/u012999318/article/details/40152331

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

网页制作

4 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现网页导航栏在页面滚动到特定位置时固定于顶部的技术方案。通过监听窗口滚动事件并调整导航栏的样式类，使其在合适时机变为固定定位，从而达到跟随滚动的效果。

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

技术拙劣，只为成长。

导航栏开始据顶部有一定距离，滚动之后接近浏览器顶部，在滚动之后不在变化，跟随浏览器窗口滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>跟随滚动</title>
   <style>
       body{position: relative;}
       .se{position: fixed; top: 0;}
   </style>
   <script src="js/jquery-1.9.1.min.js"></script>
   <script>
   var i=0;
   $(window).scroll(function(){
       i=$(window).scrollTop();
       if(i>=400){
           $(".x_box").addClass("se")

       }else{

           $(".x_box").removeClass("se")
       }

   })

   </script>

</head>
<body>
   <div style="width:100%; height:500px; background:#f00;"></div>
   <div class="x_box" style="width:100%; height:50px; background:#ccc;">你看看我跟着屏幕动了吗？</div>
   <div style="width:100%; height:5000px; background:#f00;"></div>
</body>
</html>