2025年3月29日 星期六 甲辰(龙)年 月廿八 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

jquery向下滑动指定距离右侧固定悬浮指定元素

时间:01-19来源:作者:点击数:19

“页面向下滑动到指定位置,元素固定悬浮在指定位置”——这个功能很常见,特别是在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"); // 删除属性,让他释放
  • }
  • })
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门