Nav links should active for a particular section while scrolling

Question

I had a multi-page website in that there are four links on the navbar. Out of four links two links redirects to other new pages. There is a section of content related to those links that are there on my landing page. I would like to enable those also. Kindly help in this situation the code I have implemented till today

<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>

<nav class="navigation" id="mainNav">
            <a class="navigation__link" href="#1">home</a>
            <a class="navigation__link" href="#2">about</a>
            <a class="navigation__link" href="test.html">test</a>
            <a class="navigation__link" href="#test1.html">test1</a>
</nav>

<div class="page-section home" id="1">
            <h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section about" id="2">
            <h1>Section Two</h1>
</div>
<div class="page-section" id="3">
            <h1>Section Three</h1>
</div>
<div class="page-section" id="4">
            <h1>Section Four</h1>
</div>
<div class="page-section test" id="5">
            <h1>Section Five</h1>
</div>
<div class="page-section test1" id="6">
            <h1>Section Six and this section is test section</h1>
</div>
<div class="page-section" id="7">
            <h1>Section Seven and this section is test1</h1>
</div>


* { 
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    transition: all .1s ease; 
}

html, body {
        height: 100%;
}

h1 { font-size: 64px; }

.page-section {
        height: 480px;
        width: 50%;
        margin-left: 35%;
        margin-top: 5%;
        padding: 3em;
    background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
        color: white;
        box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}

.navigation {
    position: fixed; 
        width: 30%;
        margin-left: 2%;
    background-color: #999;
    color: #fff;

    &__link {
            display: block;
        color: #ddd; 
        text-decoration: none;
        padding: 1em;
            font-weight: 400;

            &:hover {
                background-color: #aaa;
            }

           &.active {
            color: white;
                 background-color: rgba(0,0,0,0.1);
           }
    }
}


$(document).ready(function() {
        $('a[href*=#]').bind('click', function(e) {
                e.preventDefault(); // prevent hard jump, the default behavior

                var target = $(this).attr("href"); // Set the target as variable

                // perform animated scrolling by getting top-position of target-element and set it as scroll target
                $('html, body').stop().animate({
                        scrollTop: $(target).offset().top
                }, 600, function() {
                        location.hash = target; //attach the hash (#jumptarget) to the pageurl
                });

                return false;
        });
});

$(window).scroll(function() {
        var scrollDistance = $(window).scrollTop();

        // Show/hide menu on scroll
        //if (scrollDistance >= 850) {
        //      $('nav').fadeIn("fast");
        //} else {
        //      $('nav').fadeOut("fast");
        //}

        // Assign active class to nav links while scolling
        $('.page-section').each(function(i) {
                if ($(this).position().top <= scrollDistance) {
                        $('.navigation a.active').removeClass('active');
                        $('.navigation a').eq(i).addClass('active');
                }
        });
}).scroll()

odd_wizard · Answer 1 · 2020-06-03T15:43:58.337

0

What you are looking for is a scrollspy:

Scrollspy · Bootstrap

or if that is not suitable for you just google "scrollspy" and find other frameworks that may fit you more.

edited Jun 03 '20 at 15:43

answered Apr 24 '20 at 10:47

odd_wizard

21
5

This is a feature in Bootstrap since version 4. See also https://stackoverflow.com/questions/18244186/ on scrollspies in v3 – Niklas E. Apr 24 '20 at 10:51
@sandysharma If that was helpful and you used this answer to solve your problem, it would be nice if you mark that answer as accepted. Of cause only if you want. – odd_wizard Apr 24 '20 at 10:59
@odd_wizard My requirement is different. Some of the navlinks should be active for particular sections only. Eg I have 4 nav links and there are 7 sections in my home for that 4 sections only they should be active. Kindly help me out – sandy sharma Apr 24 '20 at 11:09
@NiklasE. My requirement is different. In the navbar, I have links to section on the home page and other pages also. when I scroll the home page the section which is linked to new pages summary content is there in the home. I want the navbar link should active at the particular section. – sandy sharma Apr 24 '20 at 11:15
@sandysharma Ok, I opend another answer that may suit you more. – odd_wizard Apr 24 '20 at 11:26

score 0 · Answer 2 · answered Apr 24 '20 at 11:25

0

For more custom assignments of when what should happen, there is a (very old, but still working) jQuery plugin. See:

Github: jquery.inview
Tutorial: Element 'in view' Event Plugin

Usage:

$('#mySection1').on('inview', function(event, isInView) {
  if (isInView) {
    $('#myNavOption1').addClass('active');
  } else {
    $('#myNavOption1').removeClass('active');
  }
});

answered Apr 24 '20 at 11:25

odd_wizard

21
5

If thia answer was helpful and you used it to solve your problem, it would be nice if you mark this answer as accepted. It would not only help me but also others who have the same issue and come across this question while searching. – odd_wizard Apr 28 '20 at 15:49

Nav links should active for a particular section while scrolling

2 Answers2

Scrollspy · Bootstrap

Usage: