добавление класса в position: sticky, но добавление класса к каждому прикрепленному элементу - PullRequest
Новая
       15

добавление класса в position: sticky, но добавление класса к каждому прикрепленному элементу

0 голосов
/ 01 октября 2019

Добавил этот код в мой липкий элемент, используя позицию: sticky 

var $sticky = $('.grid-container .sticky'),
  $stickyTo = $('.grid-container .stickyTo'),
  stickyToTop = $stickyTo.offset().top,
  stickyToBottom = stickyToTop + $stickyTo.outerHeight();

$(window).on('scroll', function() {
  var scroll = $(window).scrollTop(),
    stickyTop = $sticky.offset().top,
    stickyBottom = $sticky.offset().top + $sticky.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');
  }
});

, и у меня есть два липких элемента, см. Изображение, прикрепленное, но когда я прокручиваю в первый раздел, он добавляет класс "застрял" во второйраздел, как я могу сделать это только в этом разделе JQuery запускается и не влияет на второй / другой раздел, если прокручивается на

enter image description here

Вот мой FIDDLE

1 Ответ

1 голос
/ 01 октября 2019

Поскольку $sticky в вашем случае представляет собой коллекцию jQuery с двумя элементами в ней, вы должны использовать цикл .each() для проверки каждого элемента в отдельности. Тогда вам, вероятно, не нужен $stickyTo, потому что вы должны проверить для каждого "липкого" элемента свой .parent(). Примерно так: 

var $sticky = $('.grid-container .sticky'),


$(window).on('scroll', function() {
  var scroll = $(window).scrollTop()
  $sticky.each(function(){
    const $this = $(this) 
    const stickyTop = $this.offset().top,
    const stickyBottom = stickyTop + $sticky.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');
    }
  })
});

Обратите внимание, что эта функция на самом деле не оптимизирована. Было бы лучше использовать нативный javascript во время прокрутки. Или еще лучше проверить нативный CSS position: sticky.

...