滚动时激活菜单类 [英] Making a menu class active when scrolled past
问题描述
注意:使用引导程序
当锚点距屏幕顶部 50 像素时，我想将菜单项指定为活动"类.这意味着我需要在 js 中取消分配活动类并分配一个新的.
这是我的菜单
</nav>
这些是我的 h1
<h1 id="whatissm" name="whatissm"><span>sometextthere</span></h1><h1 id="whyusesm" name="whyusesm"><span>somtexthere</span></h1><h1 id="whatdoessmoffer" name="whatdoessmoffer"><span>sometextthere</span></h1><h1 id="contactus" name="contactus"><span>联系我们</span></h1>现在这是我开始挣扎的地方......
从早期的帖子中我了解到我的 js 应该看起来像这样
但不幸的是，该代码对我不起作用.1) 它不会取消分配活动类 2) 它只是不工作.
类似于这个 http://getbootstrap.com/css/(当你滚动活动右侧菜单中的类更改)
Edit2:为向下滚动的主动效果添加了我的代码......我对 js 还很陌生，所以我可能以某种方式实现了它错误.
了解实际问题:
$(window).scroll(function(){var scrollTop = $(document).scrollTop();var anchors = $('body').find('h1');for (var i = 0; i $(anchors[i]).offset().top - 50 && scrollTop <$(anchors[i]).offset().top + $(anchors[i]).height() - 50) {$('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');} 别的 {$('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');}}}); 同样的技术；检查您的每个 h1 元素是否都在元素顶部位置下方和元素底部位置上方.如果为 true，则获取元素的 id 并选择相应的导航项并为其添加活动类.
更新小提琴:http://jsfiddle.net/yrz54fqm/1/
旧答案
下面的代码应该会给你你正在寻找的结果
$(window).scroll(function(){var scrollTop = $(document).scrollTop();var anchors = $('body').find('.anchor');for (var i = 0; i $(anchors[i]).offset().top - 50 && scrollTop <$(anchors[i]).offset().top + $(anchors[i]).height() - 50) {$(anchors[i]).addClass('active');} 别的 {$(anchors[i]).removeClass('active');}}}); 您需要监听窗口上的滚动事件，并检查您的每个元素是否都在元素顶部位置下方和元素底部位置上方.
将第 3 行的 var anchors = $('body').find('.anchor'); 替换为您所处情况的锚类名称.这里还有一个关于 HTML 和 CSS 的小提琴:http://jsfiddle.net/yrz54fqm/
希望有帮助:)
Note: Using Bootstrap
I want to assign a menu item the 'active' class when the anchor is 50px away from top of the screen. This means that i need to unassign the active class in js and assign a new one.
This is my Menu
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li id="whatbutton"><a href="#whatissm">What We Are</a></li>
<li id="whybutton"><a href="#whyusesm">Why Us</a></li>
<li id="offerbutton"><a href="#whatdoessmoffer">What We Offer</a></li>
<li id="contactbutton"><a href="#contactus">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#">Right Link</a></li>
</ul>
</div>
</div>
</nav>
And these are my h1's
<h1 id="whatissm" name="whatissm"><span>sometexthere</span></h1>
<h1 id="whyusesm" name="whyusesm"><span>somtexthere</span></h1>
<h1 id="whatdoessmoffer" name="whatdoessmoffer"><span>sometexthere</span></h1>
<h1 id="contactus" name="contactus"><span>Contact Us</span></h1>
Now this is where I start to struggle...
from an early post i understand that my js should look something like this
<script>
//smooth scrolling
$(function() {
$('[data-toggle="popover"]').popover();
$('[title]').tooltip({container: 'body'});
});
$('a').click(function() {
var reduce = 150;
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - reduce
}, 500);
return false;
});
//Making class active by scrolling past it
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var anchors = $('body').find('.anchor');
for (var i = 0; i < anchors.length; i++){
if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
$(anchors[i]).addClass('active');
} else {
$(anchors[i]).removeClass('active');
}
}
});
</script>
But unfortunately that code isn't working for me. 1) It doesn't unassign the active class 2) it's just not working.
Edit: Similar to this http://getbootstrap.com/css/ (when you scroll the active class in the right menu changes)
Edit2: Added my code for the scroll down active effect... i'm fairly new to js so i may have implemented it wrong somehow.
EDIT: Understood the actual issue:
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var anchors = $('body').find('h1');
for (var i = 0; i < anchors.length; i++){
if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
$('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
} else {
$('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
}
}
});
Same technique; checking if each of your h1 elements are both below the elements top position and above the elements bottom position. If true, get the id of the element and select the corrosponding navigation item and add active class to it.
Updated fiddle: http://jsfiddle.net/yrz54fqm/1/
Old answer
Following code should give you the result you're looking for
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var anchors = $('body').find('.anchor');
for (var i = 0; i < anchors.length; i++){
if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
$(anchors[i]).addClass('active');
} else {
$(anchors[i]).removeClass('active');
}
}
});
You need to listen for the scroll event on the window, and check if each of your elements are both below the elements top position and above the elements bottom position.
Replace the var anchors = $('body').find('.anchor'); on line 3 with whatever the anchor class names are in your situation. Here's a fiddle with HTML and CSS aswell: http://jsfiddle.net/yrz54fqm/
Hope it helps :)
这篇关于滚动时激活菜单类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
