sailormoon
sailormoon

Reputation: 335

Highlight the corresponding menu item of active HTML section

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.

enter image description here

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.

Upvotes: 0

Views: 2187

Answers (2)

KuldipKoradia
KuldipKoradia

Reputation: 3031

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...

Upvotes: 1

Awais
Awais

Reputation: 4902

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>

Upvotes: 1

Related Questions