Make Sticky Navigation Bar Using Jquery

In CSS Tutorial, Sticky Header Feb 7, 2017
Sticky Navigation Bar Jquery

Do you know how to make the sticky header on scroll? What about making the navigation bar sticky using Jquery? Yep, we are going to do exactly same thing.

Both the things are same and can be done in the same way, but there is a bit difference. Today, We will create the navigation bar which will be sticky in the header.

It will not only stick at the top of the page but also work like the one-page design. Our concept to show you an excellent page design with the top area has some text or logo then a navigation.

When a user scrolls down the page, then navigation comes down and then sticky at the top.

Sticky Navigation Bar

To create the navigation, we will define the section with class name et-hero-tabs, and it will have all the navigation links.

<section class="et-hero-tabs"> <h1>STICKY SLIDER NAV</h1> <h3>Sliding content with sticky tab nav</h3> <div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">ES6</a> <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a> <span class="et-hero-tab-slider"></span> </div> </section> 

For the content section, we will have each section with unique ID.

<main class="et-main"> <section class="et-slide" id="tab-es6"> <h1>ES6</h1> <h3>something about es6</h3> </section> <section class="et-slide" id="tab-flexbox"> <h1>Flexbox</h1> <h3>something about flexbox</h3> </section> </main> 

Navigation Styling

I am not going to explain you all the styles, but you can find in the below demo. Just an important thing to notice here to have a position absolute et-hero-tab-slider

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


Here is javascript class for navigation.

class StickyNavigation { constructor() { this.currentId = null; this.currentTab = null; this.tabContainerHeight = 70; let self = this; $('.et-hero-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.checkTabContainerPosition(); this.findCurrentTabSelector(); } onResize() { if(this.currentId) { this.setSliderCss(); } } checkTabContainerPosition() { let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight; if($(window).scrollTop() > offset) { $('.et-hero-tabs-container').addClass('et-hero-tabs-container--top'); } else { $('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top'); } } findCurrentTabSelector(element) { let newCurrentId; let newCurrentTab; let self = this; $('.et-hero-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; } $('.et-hero-tab-slider').css('width', width); $('.et-hero-tab-slider').css('left', left); } } new StickyNavigation(); 
Leave a Reply

Your email address will not be published. Required fields are marked *