在调整大小时更新另一个函数中的偏移值

Question

我设置了一个简单的示例，当您从它滚动过去时，该元素会粘在顶部。 https://jsfiddle.net/k9yadr8k/6/

但是，如果我将 window 的大小调整得更小，那么内容会将元素推离 window 的顶部更远，这会使粘性元素更早地卡入固定位置。所以我的问题是，如何在 stickIt 函数中更新 window resize 上的 offVal 值？谢谢

var offVal = $('#klots').offset().top;

function stickIt() {
  var scrTop = $(window).scrollTop();

  if (scrTop > offVal) {
    $('#klots').addClass('sticky');
  } else {
    $('#klots').removeClass('sticky');
  }
}

$(window).scroll(stickIt)

Answer 1

本质上是这样的：

var $window = $(window)
var $klots = $('#klots')
var offVal = $klots.offset().top;

// listen to resize event
$window.resize(function () {
  offVal = $klots.offset().top
});

function stickIt() {
  var scrTop = $window.scrollTop();

  if (scrTop > offVal) {
    $klots.addClass('sticky');
  } else {
    $klots.removeClass('sticky');
  }
}

$window.scroll(stickIt)

在调整大小时更新另一个函数中的偏移值

Update an offset value in another function on resize

jquery

scroll

sticky