Jquery - 滚动时如何制作菜单按钮 removeClass？

Question

所以我有一个单页网站，当您单击顶部菜单上的按钮时，它会滚动到各个部分。我使用下面的代码来切换任何被点击的按钮的类，改变它的外观。

问题是，如果用户随后决定手动滚动到另一个部分，我希望按钮失去那个类，以便它回到原来的外观。

此外，如果用户手动滚动到顶部，我希望“主页”按钮重新获得类。

...换句话说，在 (document).ready 时，我将“buttonActive”类添加到主页按钮，以便访问者知道他们在哪里...

$("#menu-item-124 a").addClass("buttonActive");

...当他们单击一个按钮进入下部时，他们单击的按钮将获得“buttonActive”类...

$("ul.menu li a").click(function() {
  $("ul.menu li a").not(this).removeClass("buttonActive");
  $(this).toggleClass("buttonActive");
});

...但是当用户手动滚动到另一个部分时，我怎样才能让按钮现在失去“buttonActive”类？

...当用户手动滚动到顶部时，我怎样才能让“主页”按钮重新获得“buttonActive”类？

感谢所有帮助。谢谢!

Answer 1

您可以使用 $( window ).scroll() 函数。

1. 将“buttonActive”类添加到主页链接。
2. 在窗口上添加滚动事件监听器
3. 如果窗口滚动位置 ( $( window ).scrollTop(); ) 等于 0 或小于第一部分偏移量 ( $( '.section1' ).offset().top ) 然后删除 "buttonActive "类来自“#menu-item-124”中的所有链接，并将“buttonActive”类添加到主页链接。
4. 如果滚动位置大于 section1 偏移量且小于 section2 偏移量，则从所有链接中删除“buttonActive”类并将“buttonActive”类添加到 section1 的相应链接。
5. 其余部分也可以采用同样的方法。

创建模型:

HTML:

<div class='main-container'>
      <div id="menu-item-124">
        <a class="buttonActive">Home</a>
        <ul class="menu">
          <li><a>Section1</a></li>
          <li><a>Section2</a></li>
          <li><a>Section3</a></li>
        </ul>
      </div>

      <div class="home">
      </div>
      <div class="section1">
      </div>
      <div class="section2">
      </div>
      <div class="section3">
      </div>
    </div>

CSS

#menu-item-124 {
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  background-color: blue;
  position: fixed;
}

#menu-item-124 ul {
  list-style: none;
}

#menu-item-124 a {
  display: inline;
}

#menu-item-124 ul li {
  display: inline;
}

.home {
  background-color: white;
  height: 600px;
}

.section1 {
  background-color: yellow;
  height: 600px;
}

.section2 {
  background-color: black;
  height: 600px;
}

.section3 {
  background-color: red;
  height: 600px;
}

.buttonActive {
  background-color: yellow;
}

jQuery

$(window).on('scroll', function(e) {
  if ($(this).scrollTop() < $('.section1').offset().top) {
    $("#menu-item-124 a").removeClass("buttonActive");
    $("#menu-item-124 a:eq(0)").addClass("buttonActive");
  } else if ($(this).scrollTop() > $('.section1').offset().top && $(this).scrollTop() < $('.section2').offset().top) {
    $("#menu-item-124 a").removeClass("buttonActive");
    $(".menu li:eq(0) a").addClass("buttonActive");
  } else if ($(this).scrollTop() > $('.section2').offset().top && $(this).scrollTop() < $('.section3').offset().top) {
    $("#menu-item-124 a").removeClass("buttonActive");
    $(".menu li:eq(1) a").addClass("buttonActive");
  } else if ($(this).scrollTop() > $('.section2').offset().top) {
    $("#menu-item-124 a").removeClass("buttonActive");
    $(".menu li:eq(2) a").addClass("buttonActive");
  }
});

JS Fiddle :刚刚创建了一个粗略的模型。提供的代码可以改进很多。只是给出关于如何实现您正在尝试的想法。

谢谢