内容滚动到顶部，固定在顶部

最新推荐文章于 2023-11-21 17:03:55 发布

原创最新推荐文章于 2023-11-21 17:03:55 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素定位与固定效果的方法。通过监听滚动条位置的变化，当页面滚动到指定高度时，将指定的导航栏设置为固定在顶部。此外，还包含了一个浏览器刷新时返回顶部的功能。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>无标题文档</title>
       <style>
          body{
              margin: 0px;
              padding: 0px;
          }
          
          p {
              text-align: center;
          }
          
          .nav {
              border: 1px solid green;
              position: relative;
              height: 30px;
              background: lightcoral;
          }
          .fixednav {
              position: fixed;
              top: 0px;
              left: 0px;
              width: 100%;
          }
       </style>
   </head>
   <body>
       <p>我爱学习</p>
       <p>我爱学习</p>
       <p>我爱学习</p>
       <div class="nav">内容到达一定高度，置顶</div>
       <div class="box" style="width: 100%;height: 1100px;background: lavender;">
       </div>
       <div class="box" style="width: 100%;height: 1100px;background: pink;">
       </div>
   </body>
</html>
<script src="../jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
   $(function() {
       //刷新回顶部
       window.onbeforeunload = function() {
          var n = window.event.screenX - window.screenLeft;
          var b = n > document.documentElement.scrollWidth - 20;
          if(!(b && window.event.clientY < 0 || window.event.altKey)) {
              //这里可以放置你想做的操作代码
              $(window).scrollTop(0);
          }
       }
       //内容到达一定高度，置顶
       var nav = $(".nav"); //得到导航对象
       var win = $(window); //得到窗口对象
       var sc = $(document); //得到document文档对象。
       win.scroll(function() {
          if(sc.scrollTop() >= 60) {
              nav.addClass("fixednav");
              //           $(".navTmp").fadeIn();
          } else {
             nav.removeClass("fixednav");
              //           $(".navTmp").fadeOut();
          }
       })
   })
</script>