Bootstrap: Sticky navigation bar that becomes fixed to the top after scrolling

Question

There is an outdated version of this question on this site, it does not answer my question.

I am trying to create a website using Bootstrap that has a landing page where the cover image / carousel fill the entire browser area, and a navbar is fixed at the bottom. It should not be below the view area, but right at the bottom of the screen. Furthermore, it should be fixed so when the visitor scrolls down the navbar follows upwards, and once it hits the top of the screen it gets stuck and follows down.

I tried with the affix plugin, though I have not been able to figure out how to accomplish the above with it.

Here is a site i stumbled upon that has the layout I am trying to create: http://www.basabots.com/

Thank you for any and all help.

Answer 1

Here's a basic example of how you can do it. The basics are to have the header first at absolute position and at the bottom. Then you watch for the scroll position of the window and change the header to be fixed position and at the top after the scroll amount is above the window height minus the header height.

 var scrollpos = window.scrollY; var header = document.getElementById("header"); var windowheight = window.innerHeight; var headerheight = document.getElementById("header").offsetHeight; function add_class_on_scroll() { header.classList.add("fixed"); } function remove_class_on_scroll() { header.classList.remove("fixed"); } window.addEventListener('scroll', function() { scrollpos = window.scrollY; if (scrollpos > (windowheight - headerheight)) { add_class_on_scroll(); } else { remove_class_on_scroll(); } }); 

 html, body { width: 100%; height: 1800px; margin: 0; padding: 0; background: grey; } #header { background-color: black; color: white; position: absolute; bottom: 0; width: 100%; height: 50px; text-align: center; } #header h3 { margin: 0; line-height: 50px; } #header.fixed { position: fixed; top: 0; } 

 <div id="header"> <h3>This is the header</h3> </div> 

Fiddle to play around with: https://jsfiddle.net/thepio/c686hnek/1/