更改导航按钮的外观以响应滚动

Question

在我正在构建的页面顶部，

• 会有一些navigation buttons 用于在页面内部导航。
• 当鼠标悬停在上面时，button 会改变它的外观（例如，字体颜色和按钮本身的颜色会切换位置）。

当用户向下滚动到button 链接到的页面部分时，如何使buttons 以相同的方式更改其外观？例如，有一个标记为“联系人”的button 链接到页面的“联系人”部分。当用户向下滚动到页面的该部分时，应该如何将button's 字体颜色从（例如）白色更改为蓝色，并将背景颜色从蓝色更改为白色？

这已经在elsewhere 讨论过，但我还不熟悉headroom.js。

Answer 1

我们可以在 jquery 中使用简单的 onclick 颜色更改行为，因为其他一切都已经正常工作了。所以你可以做的就是改变点击的颜色，然后把它从之前的颜色中删除。

对于以下 HTML：

<nav>
  <li id="1"><a href="#" >One</a></li>
  <li id="2"><a href="#" >Two</a></li>
  <li id="3"><a href="#" >Three</a></li>
  <li id="4"><a href="#" >Four</a></li>
</nav> 

如果每个导航项的 onclick 颜色保持相同，则

jQuery(document).ready(function($) {
  $("nav li").each(function() {
      $(this).click(function() {
          $(this).prev().find("a").css("color", "red");
          $(this).next().find("a").css("color", "red");
          $(this).find("a").css("color", "blue");
     });
  });
});

如果每种颜色不同。

jQuery(document).ready(function($) {
    $("#1").click(function() {
      $(this).prev().find("a").css("color", "red");
      $(this).next().find("a").css("color", "red");
      $(this).find("a").css("color", "blue");
    });
})

除了.css，你还可以添加一个类似

的类

jQuery(document).ready(function($) {
  $("nav li").each(function() {
      $(this).click(function() {
        $(this).prev().find("a").removeClass("active");
         $(this).next().find("a").removeClass("active");
         $(this).find("a").addClass( "active" );
     });
  });
});

https://jsfiddle.net/yuhazt0p/1/