Home Web Development JavaScript Sticky Navbar With Sliding Underline On Scroll | HTML CSS JavaScript

Sticky Navbar With Sliding Underline On Scroll | HTML CSS JavaScript

September 5, 2019

15327

How we can create a sticky slider navigation bar using HTML CSS and JS? Solution: Check out this Sticky Navbar With Sliding Underline On Scroll, Using HTML CSS JavaScript.

Previously I have shared many types of navigation bars, but this one is different from the others. Basically, the sticky navbar is kind of navigation which sticks on the top or bottom of the webpage on scrolling. Most of the popular websites use this type of menu bars, even I also use a sticky bar you have to scroll down to see that.

Today you will learn to create a menubar which sticks on the top on scrolling down. The whole design is a one-page website, there are multiple sections that you can navigate by the pressing menu items on the top. When you will scroll down then along with sticky navbar there is a sliding underline on the bottom of menu items, that shifts according to the active section.

So, Today I am sharing Sticky Navbar With Sliding Underline On Scroll. The whole program is created using HTML, CSS, and JavaScript, there is jQuery which is a JS library. In total, there is a nav or menu bar which sticks in the top on scrolling, a sliding underline on menu items, and a responsive design. This post will be very useful, you can use it for designing your website.

If you are thinking now how this sticky navigation bar actually is, then see the preview given below.

Preview Of Stick Navigation Or Menu Bar Using HTML CSS JavaScript

See this video preview to getting an idea of how this menu bar looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

Sticky Navbar With Sliding Underline On Scroll Source Code

Before sharing source code, let’s talk about it. First, I have created menu items using the HTML hyperlink tag, then created sections using HTML section tag. In the sections I have placed a unique ID name for each section, and in the navbar or menu item targeted the id using <a href="#ID"> method (info).

Now using CSS, I have placed all the elements. In there, I have used flex display to create a responsive design. Also, I have done so many works like text color, font style, alignment, margin, padding, etc. For fonts, used a google font and linked in the HTML file and for the small screen, I have reduced font size using CSS @media query.

In this program JavaScript handling the main functions. JavaScript handling the sticky nav on scroll feature, and the sliding underline also created using JS. Let me tell you that the sliding underline on the current page is Active Link Highlight program which I have previously shared. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for the JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Sticky Navigation Bar | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

  
<section class="nav-items">
    <h1>STICKY NAVIGATION BAR</h1>
    <h3>Sticky Nav With Sliding Nav</h3>
    <div class="items-container">
      <a class="navs" href="#sec-html">HTML</a>
      <a class="navs" href="#sec-css">CSS</a>
      <a class="navs" href="#sec-js">JavaScript</a>
      <a class="navs" href="#sec-php">PHP</a>
      <a class="navs" href="#sec-sql">MySQL</a>
      <span class="bottom-slider"></span>
    </div>
  </section>


  <main class="content">
    <section class="bottom-slide" id="sec-html">
      <h1>HTML</h1>
      <h3>topics about HTML</h3>
    </section>
    <section class="bottom-slide" id="sec-css">
      <h1>CSS</h1>
      <h3>topics about CSS</h3>
    </section>
    <section class="bottom-slide" id="sec-js">
      <h1>JavaScript</h1>
      <h3>topics about JavaScript</h3>
    </section>
    <section class="bottom-slide" id="sec-php">
      <h1>PHP</h1>
      <h3>topics about PHP</h3>
    </section>
    <section class="bottom-slide" id="sec-sql">
      <h1>MySQL</h1>
      <h3>topics about MySQL</h3>
    </section>
  </main>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Sticky Navigation Bar | Webdevtrick.com</title>

</head>

<body>

<h1>STICKY NAVIGATION BAR</h1>

<h3>Sticky Nav With Sliding Nav</h3>

<a class="navs" href="#sec-js">JavaScript</a>

<a class="navs" href="#sec-sql">MySQL</a>

</div>

</section>

<h3>topics about HTML</h3>

</section>

<h3>topics about CSS</h3>

</section>

<h1>JavaScript</h1>

<h3>topics about JavaScript</h3>

</section>

<h3>topics about PHP</h3>

</section>

<h1>MySQL</h1>

<h3>topics about MySQL</h3>

</section>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  font-family: "Century Gothic", 'Lato', sans-serif;
}
a {
  text-decoration: none;
}
.nav-items,
.bottom-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: #eee;
  text-align: center;
  padding: 0 2em;
}
.nav-items h1,
.bottom-slide h1 {
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1rem;
  color: #ff5f14;
}
.nav-items h3,
.bottom-slide h3 {
  font-size: 1rem;
  letter-spacing: 0.3rem;
  opacity: 0.6;
}
.items-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background: #fff;
  z-index: 10;
}
.items-container--top {
  position: fixed;
  top: 0;
}
.navs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #212121;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
  font-size: 0.8rem;
}
.navs:hover {
  color: white;
  background: rgb(255,95,20, 0.8);
  transition: all 0.5s ease;
}
.bottom-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: #ff5f14;
  transition: left 0.3s ease;
}

@media (min-width: 800px) {
  .nav-items h1,
  .bottom-slide h1 {
    font-size: 3rem;
  }
  .nav-items h3,
  .bottom-slide h3 {
    font-size: 1rem;
  }

  .navs {
    font-size: 1rem;
  }
}
@media (max-width: 765px) {
  .nav-items h1, .bottom-slide h1 {
    letter-spacing: 0ch;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

font-family: "Century Gothic", 'Lato', sans-serif;

}

a {

text-decoration: none;

}

.nav-items,

.bottom-slide {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100vh;

position: relative;

background: #eee;

text-align: center;

padding: 0 2em;

}

.nav-items h1,

.bottom-slide h1 {

font-size: 2rem;

margin: 0;

letter-spacing: 1rem;

color: #ff5f14;

}

.nav-items h3,

.bottom-slide h3 {

font-size: 1rem;

letter-spacing: 0.3rem;

opacity: 0.6;

}

.items-container {

display: flex;

flex-direction: row;

position: absolute;

bottom: 0;

width: 100%;

height: 70px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

background: #fff;

z-index: 10;

}

.items-container--top {

position: fixed;

top: 0;

}

.navs {

display: flex;

justify-content: center;

align-items: center;

flex: 1;

color: #212121;

letter-spacing: 0.1rem;

transition: all 0.5s ease;

font-size: 0.8rem;

}

.navs:hover {

color: white;

background: rgb(255,95,20, 0.8);

transition: all 0.5s ease;

}

.bottom-slider {

position: absolute;

bottom: 0;

width: 0;

height: 6px;

background: #ff5f14;

transition: left 0.3s ease;

}

@media (min-width: 800px) {

.nav-items h1,

.bottom-slide h1 {

font-size: 3rem;

}

.nav-items h3,

.bottom-slide h3 {

font-size: 1rem;

}

.navs {

font-size: 1rem;

}

@media (max-width: 765px) {

.nav-items h1, .bottom-slide h1 {

letter-spacing: 0ch;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
class StickyNavigation {
	
	constructor() {
		this.currentId = null;
		this.currentTab = null;
		this.tabContainerHeight = 70;
		let self = this;
		$('.navs').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 = $('.nav-items').offset().top + $('.nav-items').height() - this.tabContainerHeight;
		if($(window).scrollTop() > offset) {
			$('.items-container').addClass('items-container--top');
		} 
		else {
			$('.items-container').removeClass('items-container--top');
		}
	}
	
	findCurrentTabSelector(element) {
		let newCurrentId;
		let newCurrentTab;
		let self = this;
		$('.navs').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;
		}
		$('.bottom-slider').css('width', width);
		$('.bottom-slider').css('left', left);
	}
	
}
new StickyNavigation();

// Code By Webdevtrick ( https://webdevtrick.com )

class StickyNavigation {

constructor() {

this.currentId = null;

this.currentTab = null;

this.tabContainerHeight = 70;

let self = this;

$('.navs').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 = $('.nav-items').offset().top + $('.nav-items').height() - this.tabContainerHeight;

if($(window).scrollTop() > offset) {

$('.items-container').addClass('items-container--top');

}

else {

$('.items-container').removeClass('items-container--top');

}

findCurrentTabSelector(element) {

let newCurrentId;

let newCurrentTab;

let self = this;

$('.navs').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;

}

$('.bottom-slider').css('width', width);

$('.bottom-slider').css('left', left);

}

new StickyNavigation();

That’s It. Now you have successfully created Sticky Navbar With Sliding Underline On Scroll, Using HTML CSS JavaScript. If you have any doubt or question comment down below.

2 COMMENTS

Kaya Ramirez July 17, 2020 At 10:28 pm

how would I make it so that when you scroll it snaps to each page?

Reply
lochana October 25, 2020 At 5:44 pm

how can I give each page a separate pic?

Reply

Sticky Navbar With Sliding Underline On Scroll | HTML CSS JavaScript

Preview Of Stick Navigation Or Menu Bar Using HTML CSS JavaScript

Sticky Navbar With Sliding Underline On Scroll Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY