火币HTX
火币是全球三大交易所之一,虚拟货币交易平台安全可靠,注册领取新人礼包!
“页面向下滑动到指定位置,元素固定悬浮在指定位置”——这个功能很常见,特别是在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"); // 删除属性,让他释放
}
})
© 版权声明
网站名称:玩转网
本文链接:
版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
本站资源仅供个人学习交流,转载时请以超链接形式标明文章原始出处,(如有侵权联系删除)
THE END