Sticky nav bar when it reaches the top on scroll down

Just make a simple POC for my General Assembly FEWD student.

Create the following files within the same folder


<!DOCTYPE html>
  <script src=""></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <div id="container">
    <div>Scroll down!</div>
    <h1>H</h1><h1>E</h1><h1>L</h1><h1>L</h1><h1>O</h1> <h1>W</h1><h1>O</h1><h1>R</h1><h1>L</h1><h1>D</h1><h1>!</h1>
  <script type="text/javascript" src="script.js"></script>



body {
  margin: 0;
  padding: 0;

header {
  margin: 0;
  padding: 0;
  background-color: red;
  height: 100px;

nav {
  background-color: black;
  height: 40px;
  width: 100%;

#container {
  background-color: green;
  height: 2000px;

/* Sticky scrollbar on scroll down */
nav.sticky {
  position: fixed;
  top: 0;

#container.offset {
  padding-top: 40px;



$(window).scroll(function() {
  // get the scroll position
  var height = $(window).scrollTop();
  // Output the height for debug

  if (height > 100) {
    // make the nav bar stick at the top
  } else {
    // reset the nav bar


Done =)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.