jquery - 粘性 div 工作不正确

Question

我用这个脚本制作了粘性 div -

$(window).scroll(function() {
  var leedoffset = $('.leed_block').offset().top;
    if ($(window).scrollTop() >= leedoffset) {
        $('.leed_block').addClass('sticky');
    } else {
        $('.leed_block').removeClass('sticky');
    }
})

但是当 div 变得粘滞时，顶部偏移量始终小于窗口滚动，因为它始终位于页面的可见部分。那么，我该怎么办？

Answer 1

在 scroll() 外部定义 leedoffset 处理程序，否则它将在每个滚动事件上更新。

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset,$(window).scrollTop());
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
})

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top:0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

如果屏幕调整大小导致问题，那么您可以在 resize() 的帮助下执行类似的操作 处理程序

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset, $(window).scrollTop());
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
}).resize(function() {
  leedoffset = $('.leed_block').removeClass('sticky').offset().top;
  // check updated value after removing sticky class
  $(window).scroll();
  // trigger scroll event for updating
});

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

您可以使用 toggleClass() 简化 if else 语句 带标志

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  console.log(leedoffset, $(window).scrollTop());
  $('.leed_block').toggleClass('sticky', $(window).scrollTop() > leedoffset);
}).resize(function() {
  leedoffset = $('.leed_block').removeClass('sticky').offset().top;
  // check updated value after removing sticky class
  $(window).scroll();
  // trigger scroll event for updating
});

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>

更新:根据您的评论，您可以执行类似的操作

var leedoffset = $('.leed_block').offset().top;
// otherwise it will become `0` after position changed

$(window).scroll(function() {
  if ($('.leed_block').is(':not(.sticky)'))
  // get the offset only if the sticky class is not added  
    leedoffset = $('.leed_block').offset().top;
  if ($(window).scrollTop() > leedoffset) {
    $('.leed_block').addClass('sticky');
  } else {
    $('.leed_block').removeClass('sticky');
  }
})

#main {
  height: 1000px;
}
.leed_block {
  margin-top: 250px;
}
.sticky {
  position: fixed;
  margin-top: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="leed_block">
    div
  </div>
</div>