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屋！