jquery滚动监听，并且固定表头

最新推荐文章于 2021-10-02 16:39:39 发布

租房请下载：房东直租APP

最新推荐文章于 2021-10-02 16:39:39 发布

阅读量425

点赞数

分类专栏： jquery 文章标签：滚动监听 jquery 固定表头监听滚动滚动触发事件

本文链接：https://blog.csdn.net/AinUser/article/details/101515069

版权

jquery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>测试实例</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div style="height:200px;border: 1px solid">
        <p>1</p>
    </div>
    <div class='two' style="height:200px;border: 1px solid">
        <p>监听2</p>
    </div>
    <div style="height:200px;border: 1px solid">
        <p>3</p>
    </div>
    <div style="height:200px;border: 1px solid">
        <p>4</p>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    $(function(){
        //获取要定位元素距离浏览器顶部的距离
        var navH = $(".two").offset().top;
        // console.log(navH);
        //滚动条事件
        $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            // console.log(scroH);
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
            if(scroH>=navH){
                $(".two").css({"position":"sticky","top":0});
            }else if(scroH<navH){
                $(".two").css({"position":"static"});
            }
         })
    });

  </script>
</body>

</html>

租房请下载：房东直租APP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery滚动监听，并且固定表头

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>...
复制链接

扫一扫

专栏目录