Highlight the corresponding menu item of active HTML section

Question

I have a position: fixed menu, which elements are section titles from my page. If I am currently in any of the sections, I need to highlight the corresponding item in the menu. Not on clicking menu items - I need it to work when I scroll to sections.

Code of menu goes here:

<section class="block-product-tabs">
  <div class="block-content">                                                                                                                                                                               
   <div class="block-item">
     <a href="#option-1">
       OPTION 1
     </a>
   </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  <div class="block-item">
    ...
  </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </section>

And example section:

<section class="block-title" data-target-id="option-3">
  <div class="title">Option 3</div>
</section>

I tried with jQuery:

    var sections_array = $('section.block-title');
    $(window).scroll(function() {
      var window_scroll = $(this).scrollTop();
      $(sections_array).each( function() {
        var el_position = $(this).offset().top + $(this).outerHeight() - $(window).height();
        if (window_scroll > el_position) {
           console.log($(this).data('target-id'));
        }
      }); 
   });

but it works like dominoes, when I am on section of name Option 1 , ok - console.log gives me option-1 , but when I am on Option 2 it gives me option-2 and all previous sections (because they are under it) - in this case also option-1 .

Do you know any jQuery trics to deal with it? Thanks for help.

Answer 1

You just need to add active class (with some active styles) on click and remove that just like this

 $(document).ready(function(){ $('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); }); });

 body{ font-sze:14px; } .container{ max-width:960px; margin:0 auto; } nav ul li{ list-style:none; float:left; padding-right:20px; } nav ul li a{ text-decoration:none; color:#222; background-color:#ccc; padding:4px 5px; } .active{ background-color:#d90000; color:#fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div style="text-align:center;margin-top:25px;font-weight:bold;texxxt-decoration:none;"> Visit <a href="https://themeshook.com/" px;target="_blank">My Blog</a> </div> <div class="container"> <nav class="navecation"> <ul id="navi"> <li><a class="menu active"#">About </a></li> <li><a class="menu" href="#">Contact </a></li> <li><a class="menu" href="#">Services</a></li> <li><a class="menu" href="#">Contact Us</a></li> <li><a class="menu" href="http://www.mywebtricks.com/2014/03/add-active-class-to-navigation-menu.html">Read Our Blog</a></li> </ul> </nav> </div> <body>

In you case selectors are as follow(because your structure is different)

$(document).ready(function(){
  $('.block-content .block-item a').click(function(){
    $('.block-item a').removeClass("active");
    $(this).addClass("active");
});
});

and then .active style

.active{
  background-color:#d90000;
  color:#fff;
}

Active link on click and window scroll

Note: you need to change selectors as i mention above

 $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }

 body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color: rgba(0, 0, 0, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 15px 0 0 0; } #menu-center ul li { list-style: none; margin: 0 30px 0 0; display: inline; } .active { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 50px; } #home { background-color: grey; height: 100%; width: 100%; overflow: hidden; background-image: url(images/home-bg2.png); } #portfolio { background-image: url(images/portfolio-bg.png); height: 100%; width: 100%; } #about { background-color: blue; height: 100%; width: 100%; } #contact { background-color: red; height: 100%; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="m1 menu"> <div id="menu-center"> <ul> <li><a class="active" href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> <div id="home"></div> <div id="portfolio"></div> <div id="about"></div> <div id="contact"></div>

Answer 2

try to make your code like this. I hope this is the helpful to you.

 $(document).ready(function(){ var lastId, topMenu = $(".menu_links"), menuItems = topMenu.find("a"), scrollItems = menuItems.map(function () { var item = $($(this).attr("href")); if (item.length) { return item; } }); menuItems.click(function (e) { var href = $(this).attr("href"), offsetTop = href === "#" ? 0 : $(href).offset().top + 1; $('html, body').stop().animate({ scrollTop: offsetTop }, 1200); e.preventDefault(); }); $(window).scroll(function () { var fromTop = $(this).scrollTop(); var cur = scrollItems.map(function () { if ($(this).offset().top <= fromTop) return this; }); cur = cur[cur.length - 1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; menuItems .parent().removeClass("active") .end().filter("[href='#" + id + "']").parent().addClass("active"); } }); });

 body{ margin: 0; } *{ box-sizing: border-box; } section{ height: 100vh; } .menu_links{ margin: 0px; padding: 0px; position: fixed; top: 0; left: 0; right: 0; background-color: rgba(255,255,255,0.75); } .menu_links li{ display: inline-block; float: left; } .menu_links li a{ padding: 10px; color: #000; text-decoration: none; display: inline-block; } .menu_links li.active a{ background-color: blue; color: #fff; }

 <body> <ul class="menu_links"> <li class="active"><a href="#section1">section1</a></li> <li><a href="#section2">section2</a></li> <li><a href="#section3">section3</a></li> <li><a href="#section4">section4</a></li> </ul> <section id="section1" style="background-color: pink"></section> <section id="section2" style="background-color: red"></section> <section id="section3" style="background-color: orange"></section> <section id="section4" style="background-color: green"></section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </body>

Thank You...