jquery 函数无法触发 position:sticky

Question

我在其父 "stickyTo" 中有一个名为 "sticky" 的 div，有多个父 div，在我的示例中，我只有两个滚动那个父粘性 div 出来并将在 div

上添加一个 class

var $sticky = jQuery('.sticky');


jQuery(window).on('scroll', function() {
  var scroll = jQuery(window).scrollTop();
  $sticky.each(function(){
    const $this = jQuery(this);
    const stickyTop = $this.offset().top;
    const stickyBottom = stickyTop + $this.outerHeight();

    const $stickyTo = $this.parent();
    const stickyToTop = $stickyTo.offset().top;
    const stickyToBottom = stickyToTop + $stickyTo.outerHeight();

        if (stickyBottom >= stickyToBottom) {
          if (scroll < stickyTop) {
            //$sticky.addClass('fixed').removeClass('abs');
          } else {
            //$sticky.addClass('abs');
          }
        } else if (scroll > stickyToTop) {
          $sticky.addClass('stuck');
        } else if (scroll < stickyToTop) {
          $sticky.removeClass('stuck');
        }

  })

});

这是我的 FIDDLE 让你看看我想做什么

当前代码的问题仅触发第二个 div，我在 jquery 中的 each() function 可能有问题

Answer 1

在你的每个函数中，你应该使用 $(this) 而不是 $sticky 来引用当前元素。 https://jsfiddle.net/dyc19oxL/

jQuery(window).on('scroll', function() {
  var scroll = jQuery(window).scrollTop();
  $sticky.each(function(){
  const $this = jQuery(this);
  const stickyTop = $this.offset().top;
  const stickyBottom = stickyTop + $this.outerHeight();

  const $stickyTo = $this.parent();
  const stickyToTop = $stickyTo.offset().top;
  const stickyToBottom = stickyToTop + $stickyTo.outerHeight();

    if (stickyBottom >= stickyToBottom) {
      if (scroll < stickyTop) {
        //$sticky.addClass('fixed').removeClass('abs');
      } else {
        //$sticky.addClass('abs');
      }
    } else if (scroll > stickyToTop) {
      **$(this).addClass('stuck');**
    } else if (scroll < stickyToTop) {
      **$(this).removeClass('stuck');**
    }

 })

jquery 函数无法触发 position:sticky

jquery function not working for trigerring position:sticky

wordpress

jquery

sticky