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, Feb 14 '19 at 00:08
Possible duplicate of [Sticky NavBar onScroll?](https://stackoverflow.com/questions/22541364/sticky-navbar-onscroll) — soulshined, Feb 14 '19 at 00:08
Hmm, it's a little unclear what exactly you wish to accomplish. Would you please provide some specific details? — Frish, Feb 14 '19 at 00:15
sure, check this out https://www.w3schools.com/howto/howto_js_navbar_sticky.asp — Joseph izz, Feb 14 '19 at 00:18
Your code appears to work when I tried it... What problem are you having? — a stone arachnid, Feb 14 '19 at 00:21
I want the navbar to be under the header and not start sticking at the top of the page unless i scrolled. — Joseph izz, Feb 14 '19 at 00:25
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, Feb 14 '19 at 00:26
Do you have a sample of content underneath that would make the body scroll? From what I see, it works. — a stone arachnid, Feb 14 '19 at 00:36
sure `

Business Computing

The Business Computing BSc degree is a challenging course that provides highly relevant, hands-on experience. Through a mixture of theory and real-world practice, you’ll learn how to determine a dynamic mix of processes, which allow information delivery systems and users to carry out business effectively and efficiently. You’ll come to intuitively understand how an organisation’s information systems need to adapt to the changes and developments natural to growth and progress.

` — Joseph izz, Feb 14 '19 at 00:46

Frish · Answer 1 · 2019-02-14T00:24:47.427

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 '19 at 00:24

answered Feb 14 '19 at 00:09

Frish

1,371
10
20

it worked, but now it's sticking in the top of the page not on scrolling. – Joseph izz Feb 14 '19 at 00:12
well, i copied the code from 3w schools, and in their sample itsn't stick to the top untill you scroll https://www.w3schools.com/howto/howto_js_navbar_sticky.asp – Joseph izz Feb 14 '19 at 00:16
1

@Josephizz if that's the case, the full code is here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky – a stone arachnid Feb 14 '19 at 00:18
@astonearachnid same result :) ,still not sticking AFTER scrolling. – Joseph izz Feb 14 '19 at 00:22
1

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 Feb 14 '19 at 00:25
well, after the changes it isn't sticking at all. – Joseph izz Feb 14 '19 at 00:29
1

Are you, perchance, using Opera Mini? https://caniuse.com/#search=position%3A%20fixed – Frish Feb 14 '19 at 00:40
No , i'm using chromium Version 73.0.3663.0 (Developer Build) (32-bit) – Joseph izz Feb 14 '19 at 00:43
And to be clear, when you run the snippet in my answer you do not observe a navbar which starts out static with an offset on the page and then "sticks" to the top upon scrolling down past the offset? – Frish Feb 14 '19 at 00:48
1

Just not in your document, I assume? Are you sure you've got everything syntactically correct? Javascript in ` – Frish Feb 14 '19 at 02:26
Yes i double checked, and i tried javscript from a `script` and separeted file as well. – Joseph izz Feb 14 '19 at 12:38

score 2 · Answer 2 · answered Feb 14 '19 at 00:09

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>

i want it to stick at the top of the page "after" scrolling only. — Joseph izz, Feb 14 '19 at 00:15
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. — mwilson, Feb 14 '19 at 01:39

how to create a sticky navbar css and javascript

Business Computing

2 Answers2