highlight menu on scrolling (if reach div)
Solution 1
Use $(this).offset().top
instead of $(this).position().top
As .position()
get the current coordinates of the first element in the set of matched elements, relative to the offset parent whereas .offset()
get the current coordinates of the first element in the set of matched elements, relative to the document.
In your website all the DIV with class inside .target
are inside therefore all the element of class .target
are returning the value .position().top
equal to 0.
Decrease the offset value so that the class
change when element reach the menu by making the if
condition like this:
if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
Solution 2
Found this in 2018 and ran into a syntax error trying to replicate with a more recent version of jquery (+1.0). In the last line $('nav a[href=#'+ id +']')
the attribute is not properly escaped and needs to be like so $('nav a[href="#'+ id +'"]')
(note added "").
Here's where I found this https://api.jquery.com/attribute-contains-selector/
Admin
Updated on April 19, 2020Comments
-
Admin about 4 years
i want highlight the menu point if the div is scrolled // or clicked.
http://jsfiddle.net/WeboGraph/vu6hN/2/ (thats an example what i want)
my code: (JS)
$(document).ready(function(){ $('nav a').on('click', function(event) { $(this).parent().find('a').removeClass('active_underlined'); $(this).addClass('active_underlined'); }); $(window).on('scroll', function() { $('.target').each(function() { if($(window).scrollTop() >= $(this).position().top) { var id = $(this).attr('id'); $('nav a').removeClass('active_underlined'); $('nav a[href=#'+ id +']').addClass('active_underlined'); } }); }); });
my (html nav)
<nav> <div id="cssmenu"> <ul id="horizontalmenu" class="underlinemenu"> <li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a> </li> <li><a data-scroll href="#skills">skills</a> </li> <li><a data-scroll href="#workflow">WORKFLOW</a> </li> <li><a data-scroll href="#portfolio">Portfolio</a> </li> <li><a data-scroll href="#about">About</a> </li> <li><a data-scroll href="#kontakt">Kontakt</a> </li> </ul> </div> </nav>
my (css)
.active_underlined a { color: #fff; border-bottom: 2px solid #ebebeb; } a.active_underlined { color: #fff; border-bottom: 2px solid #ebebeb; }
here a link to the project: http://www.f-designs.de/test_onesite
-
Admin over 9 yearshey thx it works, but now if i click the menu the element before the clicked element is highlighted (maybe i must set that .offset top calculates some pixels before the top of the browser?) can u help me please?
-
Gaurav Kalyan over 9 yearsUpdate the answer. You just have to decrease
cssmenu
height from offset. BTW your site looks amazing. -
Admin over 9 years@ gaurav kalyan, thanks if u like my site :) can u give me a more detailed answer // explanation what i have to do? thx and mery x-mas
-
jimh over 3 yearsI would recommend using @tris timb's answer as well.