屏幕下划时，固定div在屏幕顶部

最新推荐文章于 2026-08-13 15:53:19 发布

原创最新推荐文章于 2026-08-13 15:53:19 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

当前文章被收录于：

jquery

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用CSS和jQuery实现div元素固定位置的方法。通过定义特定的样式，如padding和背景颜色，并利用jQuery监听滚动事件，可以实现在页面滚动时div元素位置的动态调整。文章详细解释了如何使用offset()和scrollTop()方法来判断和设置div元素的位置。

对需要固定的div添加样式

#opr_fixed{
	   //自定义样式
       padding-top: 12px;
       padding-bottom: 12px;
       background: #fff;
       
	  //固定写法
       width: 100%;
       top: 0px;
       position: relative;
   }

结合jquery 进行控制：

window.onload = function () {
var pos =  $('#opr_fixed').offset();// offset() 获得div1当前的位置，左上角坐标(x,y)
  $(window).scroll(function () { //滚动条滚动事件
      if ($(this).scrollTop() > pos.top ) {
          $('#opr_fixed').css('width', '100%').css('top', $(this).scrollTop() - pos.top);
      }
      else if ($(this).scrollTop() <=  pos.top ) {
          $('#opr_fixed').css('width', '100%').css('top',0).css('position', 'relative');
      }
  })
};