Sticky Navigation Bar On Scroll using jQuery

One of creativity of website design to create a jQuery sticky navigation bar on scroll which shows border indicator while a user on the scroll the page to the down.

Creating stunning navigation is always important for a good looking website. Every designer wants to add creativity to stand out their design skills. One such skill is making a header which should have something unique.

But to build such nice and creative navigation first we need to create a sticky header using CSS so it will be fixed at the top of the page when the user scrolls down the page.

You have seen many of sites using the header and navigation which fixed on the top of the page but adding additional border indicator make it look more nicer.

The new way of web design uses the sticky position feature so today we’re going to build main navigation which will stick at the top of the page.

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 navigation.

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

Create HTML for Sticky Navigation Bar

To create the navigation, we will define the section with a 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 a 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>

Styling On Scroll Header

I am not going to explain to 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;
}

Apply JavaScript

The following is the complete JavaScript source code that make sticky navigation bar on window scroll event.

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();

You May Also Like

Leave a Comment