Question

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

问题是，如果用户然后决定手动滚动到另一个部分，我希望按钮丢失该类，以便它返回到旧的外观。

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

...换句话说，在（文档）.ready中，我将“buttonActive”类添加到Home按钮，以便访问者知道它们在哪里......

$("#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”类？

...当用户手动滚动回到顶部时，如何让“Home”按钮重新获得“buttonActive”类？

所有帮助表示赞赏。谢谢！

Answer 1

您可以使用$（window）.scroll（）函数。

添加＆＃34; buttonActive＆＃34;类到主页链接。
在窗口上添加滚动事件侦听器
如果窗口滚动位置（$（窗口）.scrollTop（）;）等于0或小于第一个部分偏移量（$（＆＃39; .section1＆＃39;）。offset（）。top）然后删除＆＃34; buttonActive＆＃34;来自＆＃34;＃menu-item-124＆＃34;中所有链接的课程并添加＆＃34; buttonActive＆＃34;类到主页链接。
如果滚动位置大于section1 offset且小于section2 offset，则删除＆＃34; buttonActive＆＃34;来自所有链接的课程并添加＆＃34; buttonActive＆＃34; class1到section1的相应链接。
同样可以用于其余部分。

创建了一个模型：

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 : 刚刚创建了一个粗略的模型。提供的代码可以大大改进。只是提出如何实现你正在尝试的想法。

THX

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

1 个答案: