how to create a sticky navbar css and javascript

Question

I'm trying to make a sticky navbar on scroll with CSS and JavaScript, but it's show as a normal navbar, and it's not sticking when scrolling. How can I make it stick when it is scrolling? i added the header to the code

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

#navbar {
  overflow: hidden;
  background-color: #333;
}


/* Navbar links */

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<div class="header">
	<h2>S I U</h2>
	<p>T h e  f u t u r e  &  B e y o n d</p>
</div>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

You have .sticky as a selector in your CSS but you don't have that class anywhere in your HTML. — takendarkk
– takendarkk, Commented Feb 14, 2019 at 0:08
Hmm, it's a little unclear what exactly you wish to accomplish. Would you please provide some specific details? — Frish
– Frish, Commented Feb 14, 2019 at 0:15
Perhaps it's simply a matter of inserting some content above your nav? Or possibly you have not set up your document correctly? Hard to say! — Frish
– Frish, Commented Feb 14, 2019 at 0:26

Frish · Accepted Answer · 2019-02-14 00:24:47Z

3

Almost there! You need to apply the .sticky class to your nav in order for it to stick.

window.onscroll = function() { myFunction() };
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

body {
   height: 10000px;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}


/* Navbar links */

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

edited Feb 14, 2019 at 0:24

answered Feb 14, 2019 at 0:09

Frish

1,40111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Joseph izz Over a year ago

it worked, but now it's sticking in the top of the page not on scrolling.

a stone arachnid Over a year ago

@Josephizz if that's the case, the full code is here: w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

Frish Over a year ago

In which case you are correct to not apply the sticky class in your HTML. I have edited my answer to reflect this (with the code straight from the w3 resource)

Frish Over a year ago

Are you, perchance, using Opera Mini? caniuse.com/#search=position%3A%20fixed

Frish Over a year ago

Just not in your document, I assume? Are you sure you've got everything syntactically correct? Javascript in <script> tag at the bottom of body, and all that?

|

mwilson · Accepted Answer · 2019-02-14 00:09:44Z

2

You aren't applying your .sticky class. Add it to your navbar (I added a bunch of div's to force some scrolling)

#navbar {
  overflow: hidden;
  background-color: #333;
}


/* Navbar links */

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}

<div id="navbar" class="sticky">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>
<div>Test to cause some stroll</div>

answered Feb 14, 2019 at 0:09

mwilson

13.1k10 gold badges65 silver badges103 bronze badges

2 Comments

Joseph izz Over a year ago

i want it to stick at the top of the page "after" scrolling only.

mwilson Over a year ago

I see. In that case, create a javascript function to apply .sticky when a user scrolls. If they are at the top of the page, you can detatch the class.

Collectives™ on Stack Overflow

how to create a sticky navbar css and javascript

2 Answers 2

11 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related