简单的jquery实现一个吸顶功能

最新推荐文章于 2024-12-07 09:40:22 发布

原创最新推荐文章于 2024-12-07 09:40:22 发布 · 597 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

jQuery 专栏收录该内容

2 篇文章

订阅专栏

博客讲述在实现效果时遇到的问题，使用jQuery计算页面滚动高度时打印不出结果。经搜索文档发现是CSS文件里的样式导致监听不到正确高度，因其他页面需要该样式，最终在当前页面将样式改成overflow: visible解决问题。

实现效果
在这里插入图片描述

      <div class="center_title">
          <span class="active_zxb">课程目录<i class="active_i" style="display: none"></i></span>
          <span>详情介绍<i style="display: none"></i></span>
      </div>

    $(document).ready(function() {
        // 当页面滚动时触发
        $(window).scroll(function() {
            // 获取页面滚动高度
            var scrollHeight = $(document).scrollTop();
   //scrollHeight > 200 这个200需要手动调试 不固定
            if (scrollHeight > 200) {
                $(".center_title").addClass('top_pot');
            } else {
                $(".center_title").removeClass('top_pot')
            }

        });
    });

.top_pot{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    padding: 0.2rem;
    background-color: #FFFFFF;
    z-index: 3;
}

在实现的过程中遇到一个问题浪费了一些时间就是在计算页面滚动的高度的时候计算不出来打印 $(document).scrollTop();打印不出来就感觉很奇怪然后搜了很多文档问题是在我的css文件里有一个样式

body,html{
      overflow-x:hidden;
}

这个样式导致监听不到正确的页面滚动高度但是别的页面我需要这个样式解决办法就是在当前页面里把样式改成 overflow: visible；问题解决

~~完结