What is Scroll Spy in Web Designing
ScrollSpy is technique in which the Navigation Menus options are automatically updated based on the scroll position of section/div/element that is visible on the screen or is active in the viewport. Having said that the element that is being spied should be in the same page.
How ScrollSpy works
ScrollSpy works on the principle that whenever the Element with an ID is visible on the screen or is almost the top of the screen, the specific navigation menu option is set active by applying CSS property to it. Adding a CSS, simply means adding a class to it which indicates the menu is "Active".
Making Scrollspy using JQuery
HTML Code
<![CDATA[
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Scrollspy</title>
</head>
<body>
<nav>
<ul>
<li><a href="#one">Section 1</a></li>
<li><a href="#Two">Section 2</a></li>
<li><a href="#Three">Section 3</a></li>
<li><a href="#Four">Section 4</a></li>
<li><a href="#Five">Section 5</a></li>
</ul>
</nav>
<div class="container">
<section class="sec" id="one">
<h1>Section One</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error
aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem
alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
</section>
<section class="sec" id="Two">
<h1>Section Two</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error
aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem
alias maiores! Voluptates officia cum reiciendis temporibus sit..</p>
</section>
<section class="sec" id="Three">
<h1>Section Three</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error
aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem
alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
</section>
<section class="sec" id="Four">
<h1>Section Four</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error
aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem
alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
</section>
<section class="sec" id="Five">
<h1>Section Five</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis error
aliquam vero quidem expedita, saepe, est earum fugiat iure beatae ex, voluptatem
alias maiores! Voluptates officia cum reiciendis temporibus sit.</p>
</section>
</div>
</body>
</html>
]]>
CSS Code
<![CDATA[
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;font-family: sans-serif;
scroll-behavior: smooth;
}
nav{
display:flex;
justify-content: center;
align-items: center;background-color: #3781b1;height: 10vh;
box-shadow: 0px 5px 15px 0px black;
position: fixed;width: 100%;top: 0;
}
nav ul{display:flex;}
nav ul li {list-style: none;padding: 0 30px;}
nav ul li a{
transition: .5s;
text-decoration: none;
color: #fff;
}
.active{
background-color: blue;padding: 10px;border-radius: 5px;font-weight: 600;
}
.sec{
height: 100vh;padding: 10%;color: #fff;display: flex;
}
.sec h1{padding: 40px;font-size: xxx-large;height: max-content;}
.sec p {font-size: larger;}
.sec:nth-child(odd){flex-direction: row-reverse;}
.sec:nth-child(odd) h1{border-left: 5px solid;margin-left: 30px;}
.sec:nth-child(even) h1{border-right: 5px solid;margin-right: 30px;}
.sec:nth-child(1){background-color: rgb(221, 86, 86);}
.sec:nth-child(2){background-color: darkslategrey;}
.sec:nth-child(3){background-color: #12a012;}
.sec:nth-child(4){background-color: rgb(238, 98, 122);}
.sec:nth-child(5){background-color: teal;}
</style>
]]>
JS Code with Explaination as Comment
<![CDATA[
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(window).on('scroll load', function() {
var currentTop = $(window).scrollTop();
//Getting the Scroll position of the Window
var elems = $('.sec');
/*The variable elems stores the div/section element that will
be spied*/
elems.each(function(index){
//A function that execute for each section
var elemTop = $(this).offset().top - 20;
/*Getting the scroll position of the section, -20 is used for
early detection of the section in the screen. The can be changed as per
your choice*/
var elemBottom = elemTop + $(this).height();
/*Getting the height of the section, to sense how far the
menu option is to be in active state*/
if(currentTop >= elemTop && currentTop <= elemBottom){
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.addClass('active');
/*adding the active class to the respective menu option*/
navElem.parent().siblings().children().removeClass( 'active' );
/*remove the active class from other sibling elements (menu option)*/
}
})
});
</script>
]]>
Scrollspy Output
Please view this output in Desktop Mode,(This example is not device responsive)
There are other ways to perform ScrollSpy.
Comments