Easy One Page Scroll Navigation Library – slide-nav

Preview:

Description:

slide-nav is a lightweight, easy-to-use JavaScript plugin used to create a sticky navigation for your one page scrolling webpages. Scrollspy and smooth scrolling are supported as well.

How to use it:

Create a nav list that contains anchor links pointing to the content sections within your html document.

<div class="nav">
  <nav>
    <a href="#section1">Link to section 1</a>
    <a href="#section2">Link to section 2</a>
    <a href="#section3">Link to section 3</a>
    <a href="#section4">Link to section 4</a>
  </nav>
</div>

<div id="section1" class="section">
  <div class="text-wr">
    <h1 class="title">
      <div class="title-top">Slide 1</div>
      <div class="title-tx">This is slide 1</div>
    </h1>
  </div>
</div>
<div id="section2" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 2</div>
    <div class="title-tx">This is slide 2</div>
  </div>
</div>
<div id="section3" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 3</div>
    <div class="title-tx">This is slide 3</div>
  </div>
</div>
<div id="section4" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 4</div>
    <div class="title-tx">This is slide 4</div>
  </div>
</div>

Style the navigation and fix it to the top of the webpage when scrolling.

.nav {
  position: fixed; /*left: 50%;*/
  width: 100%;
  top: 20px;
  z-index: 9;
  padding-left: 10px;
}
.nav a {
  padding: 7px 20px;
  border-radius: 7px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: black;
  font-family: sans-serif, arial;
  font-weight: 100;
}
.nav a.active {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.nav a:hover { background: rgba(255, 255, 255, 0.7); }

Import the main JavaScript file slideNav.js into the document.

<script src="dist/slideNav.js"></script>

Active the one page scroll navigation.

window.slide = new SlideNav();

All possible options which can be passed as a JS object to the SlideNav():

var nav = new SlideNav({
    activeClass: "active",
    toggleButtonSelector: false,
    toggleBoxSelector: false,
    hideAfterSelect: true,
    speed: 70,
    changeHash: false,
    navBoxToggleClass: false
});