jquery向下滑动指定距离右侧固定悬浮指定元素
七娃博客830人阅读
“页面向下滑动到指定位置,元素固定悬浮在指定位置”——这个功能很常见,特别是在pc页面中,几乎90%的网站都有这样的效果,那么jquery怎么实现呢?总结一个常用方法:
1.css代码:
.slider-zone{position: relative;} .rightScroll{position: fixed;z-index: 6636;right: calc((100% - 1200px)/2 -25px);top: 80px;width:300px}
2.html代码:
<div class="right-scl-fixed"> <!-- 右侧悬浮的区域代码:--> </div>
3.js代码:
$(window).scroll(function(){ var s_top = Number($(this).scrollTop()); // 获取滚动条,滚动刻度 if(s_top >= 750 ){ $('.right-scl-fixed').addClass("rightScroll"); // 添加属性,让他固定 $('.right-scl-fixed').css("top",10); }else{ $('.right-scl-fixed').removeClass("rightScroll"); // 删除属性,让他释放 } })
相关知识点:
position中的absolute和fixed以及relative的区别
[…] 你是不是做顶部悬浮喜欢用js监听滚动轴移动位置,然后position:fixed定位悬浮(https://course.51qux.com/1291.html),还会遇到固定元素一直“颤抖”个不停?哈哈,试试用一下 css position:sticky实现顶部悬浮——吸顶效果。例如:改版之后的站长之家的菜单. […]