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

Question

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

• 将有一些导航按钮，用于在页面内部导航。
• 悬停时，按钮 会改变其外观(例如，字体颜色和按钮本身的颜色会互换位置)。

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

这已经讨论过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> 

如果每个导航项的点击颜色保持不变

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/