Jquery--滚动监听事件，当滚动高度大于多少的时候，将一个div置顶

最新推荐文章于 2023-03-24 16:18:05 发布

huang_jimei

最新推荐文章于 2023-03-24 16:18:05 发布

阅读量548

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/huang_jimei/article/details/107482986

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、滚动监听事件，当滚动高度大于指定的大小的时候，修改指定div的css属性，将一个div置顶
（1)代码

<style>
  *{margin: 0;padding: 0;}
  .check_conTitle{
   width: 100%;
   height: 50px;
   line-height: 50px;
   background: #eee;
   position: fixed;
   top: 60px;
  }
</style>
<body>
    <div style="height: 1000px;width:100%;border: 1px solid #ccc;">
         <div class="check_conTitle">这是滚动高度大于90后会在顶部显示的标题</div>
    </div> 
 </body>
 <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
 <script>
   //这是移动端的监听事件
   window.addEventListener('scroll', function () {
    height=$(this).scrollTop();
//    alert(height)
    if(height>90){
     $('.check_conTitle').css({'top':'0rem'});
    }else{
     $('.check_conTitle').css({'top':'1.6rem'});
    }
})
</script>

（3）如果是PC端的，则如下

//这是PC端的监听事件
$(document).ready(function(){
     $(window).scroll(function(){
           var top=document.documentElement.scrollTop;
           if(top>90){
                 $('.check_conTitle').css({'top':'0rem'});
           }else{
                 $('.check_conTitle').css({'top':'1.6rem'});
           }
     })
 })

（4）效果图
在这里插入图片描述

huang_jimei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery--滚动监听事件，当滚动高度大于多少的时候，将一个div置顶

一、滚动监听事件，当滚动高度大于指定的大小的时候，修改指定div的css属性，将一个div置顶（1)代码<style> *{margin: 0;padding: 0;} .check_conTitle{ width: 100%; height: 50px; line-height: 50px; background: #eee; position: fixed; top: 60px; }</style><body>
复制链接

扫一扫

专栏目录