Geek Answers Handbook

Menu items get highlighted when I look through each section with a drawback

I just used this code to highlight my menu when I browse through every section of my WordPress site:

(function($) { $(document).ready(function(){ $("header nav ul").toggleClass("open"); $("section.container").addClass("section"); }); $(window).scroll(function() { var position = $(this).scrollTop(); $('.section').each(function() { var target = $(this).offset().top; var id = $(this).attr('id'); if (position >= target) { $('#primary-menu > li > a').removeClass('active'); $('#primary-menu > li > a[href=#' + id + ']').addClass('active'); } }); }); }(jQuery));

CSS

 .active{ color: #fff !important; }

Here is the link: http://scentology.burnnotice.co.za The problem is that the last element (contact) does not stand out when I look all the way to the contact section. In addition, if I click on a menu item, it goes to the corresponding section, but this menu does not stand out if I do not scroll down the page. "How can I solve this? Thanks in advance

+2
source share
2 answers

NOTE: It seems that you took this code from my answer to this SO question , I edited it to cover your case. Other people looking for more code can check it out for a snippet .

So you have two problems:

  • The last item is not highlighted.
  • When you click on a menu item, the page scrolls to the corresponding section, but this menu does not stand out if you scroll the page a bit.

Problem 1

It's easy, you just forgot to add the id attribute in the last section :)

It should be:

 <section id="contact" class="container contact-us section">

Problem 2

Your click event triggers a scroll animation in the appropriate section, but since the navigation bar is at the top of the page, you made the animation so that it leaves a small box at the top. This field prevents the section from getting to the top of the page, so the menu item is not highlighted.

@Shnibble pointed you in the right direction, you can add a small positive margin to the value returned by $(window).scrollTop() (or negative to offset().top element).

So, following the code you included, it will be something like:

 if (position + my_margin >= target) {

Fields can be the height of your navigation bar:

 my_margin = $('#site-navigation').height();

You can obviously add a little more or less to adapt it to your needs.

+1
source

There is a simple solution, and this requires a little extra math :)

You measure the top of the viewport and check to see if it is greater than or equal to the top of the specified target div. Since the content sections are exactly 100% of the viewing area, it is not possible for the top of the viewing window to be greater than or equal to the top of the last content.

What you need to do is the offset of the point that you are measuring so that you do not measure the top of the viewport, and some of them are from top to bottom, for example, halfway or 3/4 way down. This will solve your problems.

Edit: this is what you need to start and then play around by dividing the window height by 1/2 or something like this:

 var position = $(this).scrollTop() + $(window).height;
0
source

More articles:


All Articles