所以我有一个单页网站,当您单击顶部菜单上的按钮时,它会滚动到各个部分。我使用下面的代码来切换任何被点击的按钮的类,改变它的外观。
问题是,如果用户随后决定手动滚动到另一个部分,我希望按钮失去那个类,以便它回到原来的外观。
此外,如果用户手动滚动到顶部,我希望“主页”按钮重新获得类。
...换句话说,在 (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”类?
感谢所有帮助。谢谢!
最佳答案
您可以使用 $( window ).scroll() 函数。
- 将“buttonActive”类添加到主页链接。
- 在窗口上添加滚动事件监听器
- 如果窗口滚动位置 ( $( window ).scrollTop(); ) 等于 0 或小于第一部分偏移量 ( $( '.section1' ).offset().top ) 然后删除 "buttonActive "类来自“#menu-item-124”中的所有链接,并将“buttonActive”类添加到主页链接。
- 如果滚动位置大于 section1 偏移量且小于 section2 偏移量,则从所有链接中删除“buttonActive”类并将“buttonActive”类添加到 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 : 刚刚创建了一个粗略的模型。提供的代码可以改进很多。只是给出关于如何实现您正在尝试的想法。
谢谢
关于Jquery - 滚动时如何制作菜单按钮 removeClass?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35944936/