jQuery Highlight Nav links on scroll not working

Question

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.

@mehdi Explain? I don't see it working at all. Top link is what they are trying to use and the bottom URL is the site they have tried to use it on. On the site I do not see it working. — Ruddy, Nov 21 '13 at 09:06
Yes, the bottom link is what i'm trying to use it for. I cannot make it work, and I am not getting any errors in the javascript console. I'm not sure if it is just where I am placing my jQuery code within the HTML document or I am missing something completely. Perhaps there is an easier way to achieve this functionality? — Elliot Mah, Nov 21 '13 at 17:10
I just realized you may need to see the CSS as well. It is likely part of the problem. https://docs.google.com/file/d/0BwvPQbnPrz_LYVEwMndtTFJuWTQ/edit — Elliot Mah, Nov 21 '13 at 18:45

score 0 · Accepted Answer · answered Nov 22 '13 at 07:27

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

Thank you, I will give bootstrap a try, seems like my best option, since It is doing exactly what I want, including the accordion effect. Thank you for your help. — Elliot Mah, Nov 22 '13 at 07:58

jQuery Highlight Nav links on scroll not working

1 Answers1

Linked