JavaScript Library For Smooth Scroll And Scrollspy – js-navbar-scroll

Category: Javascript , Menu & Navigation | October 19, 2016
2 Comments
Demo Download
Author:vojtechsebo
Views Total:1,501 views
Official Page:Go to website
Last Update:October 19, 2016
License:MIT

Preview:

JavaScript Library For Smooth Scroll And Scrollspy – js-navbar-scroll

Description:

js-navbar-scroll is a tiny JavaScript library used to create a top navigation that provides the smooth scroll and scrollspy experiences on your single page web application.

How to use it:

Load the JavaScript and CSS files in the document.

<link href="css/main.css" rel="stylesheet">
<script src="js/bundle.js"></script>

Create the header navigation and corresponding content sections as follows:

<header>
  <div class="navbar">
    <ul class="navbar-list">
      <li class="navbar-item">
        <a href="#about">About</a>
      </li>
      <li class="navbar-item">
        <a href="#experience">Experience</a>
      </li>
      <li class="navbar-item">
        <a href="#portfolio">Portfolio</a>
      </li>
      <li class="navbar-item">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</header>
<section class="content">
  <article id="about" class="section">About section</article>
  <article id="experience" class="section">Experience section</article>
  <article id="portfolio" class="section">Portfolio section</article>
  <article id="contact" class="section">Contact section</article>
</section>

 

See Also:

You Might Be Interested In:

2 thoughts on “JavaScript Library For Smooth Scroll And Scrollspy – js-navbar-scroll”

  2. Matthew Kessanis

    This is excellent. Here is what you need to fix:

    Offset the change of section on the NAV bar, by the height of the NAV bar.

    This is because the user scrolls to the end of a section – the boundary of the section, and that boundary is sitting on the edge of the NAV bar.

    If we make the NAV bar vertical, ie Left Column NAV bar, we would see that the previous section is still in the viewport, so the NAV is correctly showing the current section.

    Further, consider a margin between sections. Since the NAV seems to lag in switching to the next article, you should make the margin a TOP Margin, so that the next article can be in the same position but trigger earlier. This is a great alternative to changing javascript. It also lets the code adapt to any new design.

    Top margin HEIGHT must be > or = to NAV HEIGHT.

    Reply ↓

Leave a Reply