jQuery高亮显示滚动时的导航链接不工作 [英] jQuery Highlight Nav links on scroll not working
问题描述
我对JavaScript非常新,所以我提前道歉。我试图创建一个单页html文档为学校项目使用导航链接列表,当锚点滚动到时更改。我试过各种不同的方法发现Jfiddle和通过stackoverflow。这是我现在尝试的方法: http://jsfiddle.net/m2zQE/
var topRange = 200,//从视口顶部测量到X像素向下
edgeMargin = 20,从页面结尾的顶部或边距
animationTime = 1200,//时间(以毫秒为单位)
contentTop = [];
$(document).ready(function(){
//如果用户做某事,停止动画滚动
$ ('html,body')。bind('scroll mousedown DOMMouseScroll mousewheel keyup',function(e){
if(e.which> 0 || e.type =='mousedown'|| e.type =='mousewheel'){
$('html,body')。stop();
}
});
//设置内容数组
$('#nav')。find('a')。each(function(){
contentTop.push($($)this.attr('href')) .offset()。top);
});
// Animate菜单滚动到内容
$('#nav')。find (function(){
var sel = this,
newTop = Math.min(contentTop [$('#nav a')。index($(this))],$(document).height () - $(window).height()); //如果在文档底部获取内容顶部或顶部位置
$('html,body')。 'scrollTop':newTop
},animationTime,function(){
window.location.hash = $(sel).attr('href');
});
return false;
});
//调整侧边菜单
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height()+ edgeMargin; // viewport height + margin
$ .each(contentTop,function(i,loc) b $ b if((loc> winTop - edgeMargin&&(loc< winTop + topRange ||(winTop + vpHt)> = bodyHt))){
$('#nav li'
.removeClass('selected')
.eq(i).addClass('selected');
}
});
});
我还没有运气。我已经搜索,看看我是否可以调试这个问题,并尝试更改代码的顺序以及调用jquery的顺序。
这里是一个链接到网站: https://googledrive.com/host/0BwvPQbnPrz_LMlZDeGlFY2Yydmc/index.html
我用html5boilerplate作为起点。提前提醒。
没有太多时间查看您的代码,但输入行时
Math.min [$('#nav a')。index($(this))],$(document).height() - $(window).height())
pre>
到开发者工具的控制台,它返回NaN。
所以我想问题是你
我建议你给每个元素一个id,然后尝试:
$('html,body')。animate({
scrollTop:$(#elementID)。offset()。top
},2000);
或如果您坚持不给予id,
$('html,body')。animate({
scrollTop:$(#container-fulid:nth-child(2) top
},2000);
但是注意,这并不适用于所有的浏览器,因为第n个子选择器是CSS3选择器。
或者,如果您知道如何正确使用其他工作,您可以尝试使用bootstrap 3.0,其中已经有一个名为scrollspy的函数,您正在做。
http://getbootstrap.com / javascript /#scrollspy
I'm extremely new to JavaScript so I apologize in advance. I'm trying to create a one page html document for a school project using a list of links for navigation that change when the anchor is scrolled to. I've tried various different methods found on Jfiddle and through stackoverflow. This is the method I am trying now: http://jsfiddle.net/m2zQE/
var topRange = 200, // measure from the top of the viewport to X pixels down edgeMargin = 20, // margin above the top or margin from the end of the page animationTime = 1200, // time in milliseconds contentTop = []; $(document).ready(function () { // Stop animated scroll if the user does something $('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function (e) { if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') { $('html,body').stop(); } }); // Set up content an array of locations $('#nav').find('a').each(function () { contentTop.push($($(this).attr('href')).offset().top); }); // Animate menu scroll to content $('#nav').find('a').click(function () { var sel = this, newTop = Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom $('html,body').stop().animate({ 'scrollTop': newTop }, animationTime, function () { window.location.hash = $(sel).attr('href'); }); return false; }); // adjust side menu $(window).scroll(function () { var winTop = $(window).scrollTop(), bodyHt = $(document).height(), vpHt = $(window).height() + edgeMargin; // viewport height + margin $.each(contentTop, function (i, loc) { if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) { $('#nav li') .removeClass('selected') .eq(i).addClass('selected'); } }); }); });
I'm still not having any luck. I've already searched to see if I could debug the problem and have tried changing the order of the code as well as the order of calling jquery.
Here is a link to the site: https://googledrive.com/host/0BwvPQbnPrz_LMlZDeGlFY2Yydmc/index.html
I used html5boilerplate as a starting point.Thank you in advance.
解决方案Don't have much time to look into your code, but when I input the line
Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height())
into the console of developer tools, it return NaN.
So I guess the problem is you don't have your scrollTop correctly set.
I suggest you give each element an id and try:
$('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000);
or if you insist not giving id,
$('html, body').animate({ scrollTop: $("#container-fulid:nth-child(2)").offset().top }, 2000);
but notice that this is not working on all browser as the nth-child selector is a CSS3 selector.
Or, if you know how to correctly use other's work, you may try to use bootstrap 3.0, where there is already a function named scrollspy included, which do exactly the thing you are doing.
http://getbootstrap.com/javascript/#scrollspy
这篇关于jQuery高亮显示滚动时的导航链接不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!