Использование addClass () для нацеливания элементов в структуре

Question

Контекст: я использую jQuery и CSS для анимации уменьшающегося липкого заголовка навигации в Wordpress.Код jQuery использует addClass() для добавления .shrink к триггеру прокрутки, а затем CSS может использоваться для нацеливания и манипулирования им.

Пожалуйста, взгляните на этот простой код ниже.

jQuery(function(){
    var shrinkHeader = 250;
        $(window).scroll(function() {
            var scroll = getCurrentScroll();
            if ( scroll >= shrinkHeader ) {
                $('.site-header').addClass('shrink');
                $('.primary-navigation').addClass('shrink');
                $('.secondary-navigation').addClass('shrink');
                $('.menu-toggle').addClass('shrink');
            }
            else {
                $('.site-header').removeClass('shrink');
                $('.primary-navigation').removeClass('shrink');
                $('.secondary-navigation').removeClass('shrink');
                $('.menu-toggle').removeClass('shrink');
            }
        });

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});

Я новичок в js и знаю, что это не очень красиво.Я надеялся добавить .shrink ко всем этим элементам в последовательности, но, похоже, это работает только для .site-header.Кажется, я не могу нацелить другие указанные элементы на .shrink (при тестировании ничего не происходит).Это потому, что .site-header находится на более высоком уровне в структуре, а остальные - под ней?Нужно ли дополнительно указывать, чтобы помочь addClass() найти его?

Структура выглядит примерно так

<header class="site-header">
    <div class="col-full">
        <nav class="secondary-navigation"></nav>
        <nav class="main-navigation">
            <button class="menu toggle"></button>
            <div class="primary-navigation"></div>
        </nav>
    </div>
</header>

Так что здесь происходит, почему другие указанные классы не являютсяс добавлением .shrink и как это правильно сделать?

PS Есть ли какой-нибудь умный способ экспортировать html-структуру div с веб-страницы с помощью браузера devtools или чего-то подобного?

--- ОБНОВЛЕНИЕ 1 ---

Попытка некоторых предложений из ответов.Приведенный ниже CSS показывает, что проблема не в CSS

/* Shows black bg, as it should */
.site-header {
    position: fixed;
    background: black;
}

/* Shows blue bg on scroll, as it should */
.site-header.shrink {
    background: blue;
}


/* Now trying the same with .secondary-navigation */

/* Shows red bg, as it should */
.secondary-navigation {
    background: red;
}

/* Nothing happens here, bg still red */
.secondary-navigation.shrink {
    background: green !important;
}

Так что, похоже, он работает только с .site-header.

• Я попытался изменить jQueryкод в это $('.site-header').find('.secondary-navigation').addClass('shrink');, но это не помогло.

• Я вижу .site-header.shrink существует, когда страница прокручивается вниз, но .secondary-navigation.shrink нет.Похоже, класс не добавлен.

• Я не уверен, какую версию jQuery я использую, но она в комплекте с последней версией Wordpress.Но я сомневаюсь, что причиной этой проблемы здесь является устаревшая версия jQuery.

• Я не уверен на 100%, что показываю вам правильную структуру div (я довольно новичок в ИнтернетеDEV).Я не знаю ни одного способа его экспорта, поэтому я просто заново создал его в своем посте, изучив страницу в браузере devtools.Это должно быть довольно точно.

Одна мысль, которая пришла в голову, может быть, это вызвано последовательностью, которую Wordpress создает структуру div?Возможно, .site-header создается рано при загрузке страницы перед вставкой других элементов позже, и это каким-то образом приводит к тому, что код jQuery к ним не применяется.Но я не уверен, что код jQuery позаботится об этом, и я даже не знаю, как проверить, так ли это, или то, что можно было бы сделать в этой ситуации, если это не может быть решено путем изменения кода jQuery каким-либо образом.

Answer 1

Я думаю, это будет лучше для вас:

  jQuery(function(){
      var shrinkHeader = 250;
          $(window).scroll(function() {
              var scroll = getCurrentScroll();
              if ( scroll >= shrinkHeader ) {
                  $('.site-header').addClass('shrink');
                  $(document).find('.primary-navigation').addClass('shrink');
                  $(document).find('.secondary-navigation').addClass('shrink');
                  $(document).find('.menu.toggle').addClass('shrink');
              }
              else {
                  $('.site-header').removeClass('shrink');
                  $(document).find('.primary-navigation').removeClass('shrink');
                  $(document).find('.secondary-navigation').removeClass('shrink');
                  $(document).find('.menu.toggle').removeClass('shrink');
              }
          });

  function getCurrentScroll() {
      return window.pageYOffset || document.documentElement.scrollTop;
      }
  });

Обратите внимание, что этот код протестирован, и его единственной целью является добавление и удаление класса shrink из определенных элементов при прокрутке, и он делает это без проблем, если вы не видите желаемый результат, который может быть, потому что вашего CSS.

Answer 2

Я попробовал то же самое, и код работает, в Chrome-Console, где вы можете видеть элементы страницы, классы изменяются каждый раз, когда прокрутка вниз> 250. Вы можете попробовать использовать команду Chrome F12, чтобы увидеть консоль и проверить, изменяет ли браузер классы. Вы также можете попробовать это в других браузерах с помощью команды F12 на клавиатуре. Проверьте, является ли версия jQuery, которую вы импортируете на свой сайт, последней и обновленной. Проверьте мой CodePen здесь , затем проверьте то, что я сказал выше. Если какие-либо проблемы продолжают появляться, сообщите нам.