selfboot selfboot - 3 months ago 8
Javascript Question

Highlight TOC on scrolling. Works fine on jquery 1.10.1 but not 3.0.0

I'm new to jquery, and I just want to make my blog looks better. So I decided to make the links in TOC just move when the page scroll, after searching for a while, I find a way finally.

Code:

$(function() {
$(window).scroll(function() {
$(":header").each(function() {
if($(window).scrollTop() >= $(this).offset().top) {
var id = $(this).attr('id');
$('.nav a').removeClass('active');
$('.nav a[href=#'+ id +']').addClass('active');
}
});
});
});


It works well when jquery is 1.10.1, but when it comes to 3.0.0(my blog framework uses 3.0.0), it doesn't work any more.

Can anybody help me out? I'm stuck for a night.

Here's my JSFiddle

Answer

I tried you fiddle and changed to jQuery 3.0.0 and changed this line $('.nav a[href="#'+ id +'"]').addClass('active');

by adding " " to href. JSFiddle it is working now

Comments