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在结构中位于较高的级别，而其他结构在其下面是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结构（对于Web开发人员来说我是很新的）。我不知道有什么方法可以导出它，因此我只是通过检查浏览器devtools中的页面在帖子中手动重新创建了它。不过应该很准确。

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

Answer 1

我尝试过同样的事情，并且代码起作用，在Chrome控制台中，您可以在其中看到页面元素，每次向下滚动> 250时，类都会修改。您可以尝试使用Chrome F12命令查看控制台，并检查浏览器是否更改了类。您也可以使用键盘上的F12命令在其他浏览器中尝试使用。检查您要导入到网站的jQuery版本是否为最新版本。检查我的CodePen here，然后检查我上面所说的内容。如果仍然有问题，请告诉我们。

Answer 2

我认为这对您更好：

  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。

使用addClass（）定位结构中的元素

2 个答案: