javascript - 使用 addClass() 定位结构中的元素

问题描述

背景：我正在使用 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位于结构的更高级别，而其他的都是 div？是否必须进一步指定才能帮助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 有没有什么聪明的方法可以使用浏览器 devtools 或类似的东西从网页中导出 html div 结构？

---更新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 结构（我对网络开发很陌生）。我不知道有什么方法可以导出它，所以我只是在我的帖子中通过检查浏览器 devtools 中的页面手动重新创建它。不过它应该是相当准确的。

想到一个想法，可能是由 Wordpress 创建 div 结构的序列引起的吗？也许.site-header是在页面加载的早期创建，然后再插入其他元素，并且它以某种方式导致 jQuery 代码不适用于它们。但是我不确定 jQuery 代码是否会关心这一点，我什至不知道如何检查是否是这种情况，除非可以通过以某种方式修改 jQuery 代码来解决，否则在这种情况下也不能做什么。

标签： javascriptjquerywordpress

我认为这对你会更好：

  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。

javascript - 使用 addClass() 定位结构中的元素

问题描述

解决方案

推荐阅读