Nav Bar To Remain Fixed As Soon As It Reaches Top Of Page

In my code there is a banner at the top of the page and a nav bar just below it. What I want to do is when I scroll down, the banner & nav bar scroll like they should but as so

Solution 1:

Jolan, most of you code is right, but you need a tiny bit of Javascript into your code for the nav bar to slide up while scrolling. Hope this helps.

varheader=document.querySelector("#header");newHeadroom(header, {
  tolerance: {
    down :2,
    up :5
  },
  offset :100,
  classes: {
    initial:"slide",
    pinned:"slide--reset",
    unpinned:"slide--up"
  }
}).init();

Solution 2:

For this you need some javascript. There is sample which is related to your prblem check this Fiddle.

JQuery

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('#scroller').css('top', $(window).scrollTop());
    }
}
);

100 in this code the distance of navbar from the top. You can vary it according to your requirements.

You can also refer to this link JQuery Position:Fixed 'NAVBAR' by scrolling the page

Solution 3:

My solution doesn't require jQuery, so enjoy :

functionscrollTop() {
  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
}
var navbar = document.getElementById('navbar')
var sticky_point = 100window.onscroll = function() {
  if (scrollTop() >= sticky_point) {
    navbar.style.position = 'fixed'
  } elseif (scrollTop() < sticky_point) {
    navbar.style.position = 'static'
  }
}

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px;
  background: #2c3e50;
}

nav {
  width: 100%;
  height: 30px;
  background: #34495e;
  top: 0;
}

<header>HEADER</header><navid="navbar">NAVBAR</nav><div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque
  nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore
  qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti
  maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis
  magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque,
  consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

When you scroll, the Javascript checks where you are on the page, if you are below the sticky_point, the navbar has the property : position: fixed;.

Do not hesitate to ask me for help if you have problems integrating this in your website.