Sticky One Page Scroll Navigation With jQuery And CSS3

Makes use of jQuery, CSS3 animations and flexbox model to create a sticky top navigation for your one page scroll websites, with support for scrollspy and smooth scroll.

How to use it:

1. Add sliding content to your one page scroll website as this:

<main class="spa-main">
  <section class="spa-slide" id="tab-1">
    <h1>Section 1</h1>
    <h3>This is section 1</h3>
  </section>
  <section class="spa-slide" id="tab-2">
    <h1>Section 2</h1>
    <h3>This is section 2</h3>
  </section>
  <section class="spa-slide" id="tab-3">
    <h1>Section 3</h1>
    <h3>This is section 3</h3>
  </section>
  ...
</main>

2. Create a navigation for the sliding content.

<section class="sticky-nav-tabs">
  <h1>Sticky Navigation</h1>
  <div class="sticky-nav-tabs-container">
    <a class="sticky-nav-tab" href="#tab-1">Section 1</a>
    <a class="sticky-nav-tab" href="#tab-2">Section 2</a>
    <a class="sticky-nav-tab" href="#tab-3">Section 3</a>
    <span class="sticky-nav-tab-slider"></span>
  </div>
</section>

3. The required CSS/CSS3 styles for the sticky top navigation.

.sticky-nav-tabs, .spa-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: #eee;
  text-align: center;
  padding: 0 2em;
}

.sticky-nav-tabs h1, .spa-slide h1 {
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1rem;
}

.sticky-nav-tabs h3, .spa-slide h3 {
  font-size: 1rem;
  letter-spacing: 0.3rem;
  opacity: 0.6;
}

.sticky-nav-tabs-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 75px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: #fff;
  z-index: 1;
  -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sticky-nav-tabs-container--top-first {
  position: fixed;
  top: 75px;
  -webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sticky-nav-tabs-container--top-second {
  position: fixed;
  top: 0;
}

.sticky-nav-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #000;
  letter-spacing: 0.1rem;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-size: 0.8rem;
}

.sticky-nav-tab:hover {
  color: white;
  background: rgba(102, 177, 241, 0.8);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sticky-nav-tab-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: #66B1F1;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
}

4. Load the needed jQuery JavaScript library at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 

5. The core JavaScript (jQuery script) to active the sticky top navigation.

class StickyNavigation {
  
  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    this.lastScroll = 0;
    let self = this;
    $('.sticky-nav-tab').click(function() { 
      self.onTabClick(event, $(this)); 
    });
    $(window).scroll(() => { this.onScroll(); });
    $(window).resize(() => { this.onResize(); });
  }
  
  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1;
    $('html, body').animate({ scrollTop: scrollTop }, 600);
  }
  
  onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
  }
  
  onResize() {
    if(this.currentId) {
      this.setSliderCss();
    }
  }
  
  checkHeaderPosition() {
    const headerHeight = 75;
    if($(window).scrollTop() > headerHeight) {
      $('.spa-header').addClass('spa-header--scrolled');
    } else {
      $('.spa-header').removeClass('spa-header--scrolled');
    }
    let offset = ($('.sticky-nav-tabs').offset().top + $('.sticky-nav-tabs').height() - this.tabContainerHeight) - headerHeight;
    if($(window).scrollTop() > this.lastScroll && $(window).scrollTop() > offset) {
      $('.spa-header').addClass('spa-header--move-up');
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-first');
      $('.sticky-nav-tabs-container').addClass('sticky-nav-tabs-container--top-second');
    } 
    else if($(window).scrollTop() < this.lastScroll && $(window).scrollTop() > offset) {
      $('.spa-header').removeClass('spa-header--move-up');
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-second');
      $('.sticky-nav-tabs-container').addClass('sticky-nav-tabs-container--top-first');
    }
    else {
      $('.spa-header').removeClass('spa-header--move-up');
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-first');
      $('.sticky-nav-tabs-container').removeClass('sticky-nav-tabs-container--top-second');
    }
  }
  
  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $('.sticky-nav-tab').each(function() {
      let id = $(this).attr('href');
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if(this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }
  
  setSliderCss() {
    let width = 0;
    let left = 0;
    if(this.currentTab) {
      width = this.currentTab.css('width');
      left = this.currentTab.offset().left;
    }
    $('.sticky-nav-tab-slider').css('width', width);
    $('.sticky-nav-tab-slider').css('left', left);
  }
  
}

new StickyNavigation();

---

This awesome jQuery plugin is developed by ettrics. For more Advanced Usages, please check the demo page or visit the official website.