javascript 单页导航菜单 - 活动指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18468170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Single page navigation menu - active indicator
提问by hyperdrive
I'm trying to update the navigation for a single page website using jQuery waypoints.
我正在尝试使用 jQuery 航点更新单页网站的导航。
I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be.
我想根据当前视图更新导航。使用导航链接向下时它工作正常。我的问题是当您尝试滚动到当前部分上方的部分时，活动锚点位于应位于的下方。
Please see my Demo.
请看我的演示。
jQuery
jQuery
$(document).ready(function(){
$('section').waypoint(function(direction) {
thisId = $(this).attr('id');
$('ul li').each(function(){
var secondaryID = $(this).attr('class');
if ( secondaryID == thisId )
{
$('ul li').removeClass('active');
$(this).addClass('active');
}
});
},{offset: '0'});
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
HTML
HTML
<ul>
<li class="test"><a href="#test"></a></li>
<li class="test2"><a href="#test2"></a></li>
<li class="test3"><a href="#test3"></a></li>
<li class="test4"><a href="#test4"></a></li>
<li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>
Update
更新
I got this to work using two waypoint functions with different offsets but this is clearly not the best solution.
我使用两个具有不同偏移量的航路点函数来实现这一点，但这显然不是最好的解决方案。
I trying to find a way of specifying offsets from within the same function (depending on direction), I used a variable for offset with values of (1 & -1), but unfortunately it only uses +1.
我试图找到一种在同一个函数中指定偏移量的方法（取决于方向），我使用了一个变量作为偏移量，其值为 (1 & -1)，但不幸的是它只使用了 +1。
采纳答案by Dart
Try this: your modified example
试试这个：你修改过的例子
$(document).ready(function(){
$('section').waypoint(function(direction) {
var me = $(this); //added
thisId = $(this).attr('id');
$('ul li').each(function(){
var secondaryID = $(this).attr('class');
if ( secondaryID == thisId )
{
$('ul li').removeClass('active');
//added
if(direction==='up'){
me = $(this).prev();
}
//added
if(!me.length){
me = $(this);
}
$(this).addClass('active');
}
});
},{offset: '0'});
});
UPDok, how about this example:
UPD好的，这个例子怎么样：
The idea is:
这个想法是：
1) When we hit section N top border, while scrolling down, means active section become section N + 1.
1) 当我们点击第 N 部分的顶部边框时，向下滚动时，意味着活动部分变为第 N + 1 部分。
2) When we hit section N top border, while scrolling top, means section N become active.
2) 当我们点击第 N 部分的顶部边框时，在滚动顶部时，意味着第 N 部分变为活动状态。
PS. sorry for my english
附注。对不起我的英语不好
Javascript
Javascript
$(document).ready(function(){
$('section').waypoint(function(direction) {
var activeSection = $(this);
if(direction === 'down'){
activeSection = $(this).next();
}
//activeSection = $(this);
var sectionId = activeSection.attr('id');
$('ul li').removeClass('active');
$('ul li.' + sectionId).addClass('active');
console.log(activeSection);
});
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - (target.height() / 5)
}, 500);
return false;
}
}
});
