scrollspy

Easy to add scrollspy to wordpress or any website without using bootstrap or other framework.

by abhishek bhandari

HTML

<div id="singlesticky_nav">
  <ul>
  <li class="active"><a href="#home">Home</a></li>
     <li><a href="#about">About</a></li>
    <li> <a href="#work">Work</a></li>
    <li> <a href="#contact">Contact</a></li>
  </ul>
</div>

<section id="home">
  
</section>
<section id="about">
  
</section>
<section id="work">
  
</section>
<section id="contact">
  
</section>

CSS

*{
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body{
  margin: 0px;
  padding: 0px;
}

#singlesticky_nav{
  position: fixed;
  width: 100%;
  padding: 1em 0;
  background-color: #fff;
}

#singlesticky_nav ul{
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  height: 3em;
  line-height: 3em;
}

#singlesticky_nav li.active a{
  background: #000;
  color: white;
}
a:hover{
  color: #85D6CB;
}

.nav-link{
  padding: 0 1em;
  margin: 0 3em;
  border-radius: 2em;
  transition: all .4s;
}


section{
  height: 100vh;
}
#home{
  background: blue;
}
#about{
  background: yellow;
}
#work{
  background: red;
}
#contact{
  background: orange;
}

JavaScript

; (function ($, window, document, undefined) {

    $.fn.extend({

        scrollspy: function (options) {

            // Define our defaults
            var defaults = {
                namespace: 'scrollspy',
                activeClass: 'active',
                animate: false,
                duration: 1000,
                offset: 0,
                container: window,
                replaceState: false
            };

            // Add any overriden options to a new object
            options = $.extend({}, defaults, options);

            // Adds two numbers together
            var add = function (ex1, ex2) {
                return parseInt(ex1, 10) + parseInt(ex2, 10);
            }

            // Find our elements
            var findElements = function (links) {

                // Declare our array
                var elements = [];

                // Loop through the links
                for (var i = 0; i < links.length; i++) {

                    // Get our current link
                    var link = links[i];

                    // Get our hash
                    var hash = $(link).attr("href");

                    // Store our has as an element
                    var element = $(hash);

                    // If we have an element matching the hash
                    if (element.length > 0) {

                        // Get our offset
                        var top = Math.floor(element.offset().top),
                            bottom = top + Math.floor(element.outerHeight());

                        // Add to our array
                        elements.push({ element: element, hash: hash, top: top, bottom: bottom });
                    }                    
                }

                // Return our elements
                return elements;
            };

            // Find our link from a hash
            var findLink = function (links, hash) {

                // For each link
                for (var i = 0; i <...