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>
    <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)效果图
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/huang_jimei/article/details/107482986
今日推荐