滚轮滚动到某位置时指定div改变定位属性

知识点:
1、offset() 方法返回或设置匹配元素相对于文档的偏移;offset().top:获得距离视口高度;
2、(window).scroll当用户滚动滑轮时,会发生scroll事件。3、(window).scroll 当用户滚动滑轮时,会发生 scroll 事件。 3、(window).scrollscroll3(window).scrollTop()与$(document).scrollTop()效果相同,返回滚动条的滚动位置;但前者为窗口对象,后者为文档对象。

代码部分:
假设有一个导航栏在视口非顶部,要求滚动到该导航栏位置时,导航栏固定在某一位置,在窗口中始终可见。

<script>
		    var topBegin=$(".positionMiddleNav").offset().top;  //获取导航栏(class='positionMiddleNav')离视口的高度 
     $(window).scroll(function(){  //scroll事件
      var win_top=$(this).scrollTop(); //获取滚动条位置
      var _top=$(".positionMiddleNav").offset().top; //获取当前导航栏距视口高度
       console.log(win_top , 'aa');
					  console.log(_top , 'cc');
      if(win_top>=_top){
       $(".positionMiddleNav").addClass("sfixed"); //添加sfixed类, 改变定位属性
      }
      if(win_top<topBegin){ //因为导航栏距视口高度在定位发生后是变化的 ,
      //所以当导航栏回到原位置时保持先前状态需要将滚动条位置与最先前的导航栏位置进行对比
       $(".positionMiddleNavl").removeClass("sfixed");
      }
     })
</script>
/* 属性随你自定义,我只是随便写一下*/
.sfixed {
	  position: fixed;
    width: 1140px !important;
    left: 359px;
    padding: 10px 10px 10px 40px!important;
    top: 0;
    background: #fff;
    box-shadow: 0 10px 10px #eee;
    z-index: 999;
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值