Nav links should active for a particular section while scrolling - html

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()

Answer 1

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');
}
});

Answer 2

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.