JQuery функция не работает для позиции тригерринга: липкий - PullRequest
Новая
       11

JQuery функция не работает для позиции тригерринга: липкий

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

У меня есть этот div, называемый «sticky» в его родительском «stickyTo», есть несколько родительских divов, в моем примере у меня есть только два, и при каждой прокрутке на этом родительском объекте выходит липкий div и я добавляю класс в этот div

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 , поэтому покажу вам, что я пытаюсь сделать

Проблема с текущим кодом вызывает только 2-й дивизион, что-то не так с моимeach() function в JQuery, вероятно

1 Ответ

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

В каждой функции вы должны ссылаться на текущий элемент с помощью $ (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');**
    }

 })
...