How to create a sticky navigation bar that becomes fixed to the top after scrolling

Question

I m attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded  then as the user scrolls down  the nav bar scrolls up  and eventually becomes fixed to the top   I m using Bootstrap  just like this site  but I can t figure out how this site did it   Any help   Here s the site with the nav bar I m trying to emulate  http   www blastprocessor co uk   Here s my navigation html and css code   HTML    lt div class  navbar navbar-fixed-top  id  navbar  gt       lt div class  navbar-inner  gt           lt div class  container  gt               lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt  a gt               lt div class  nav-collapse  gt                   lt ul class  nav nav-pills  gt                       lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt                       lt li gt  lt a href   service-link  gt Services lt  a gt  lt  li gt                       lt li gt  lt a href   contact-link  gt Contact lt  a gt  lt  li gt                   lt  ul gt  lt  --   nav -- gt               lt  div gt  lt  --  nav-collapse -- gt           lt  div gt  lt  --   container -- gt       lt  div gt  lt  --   navbar-inner -- gt   lt  div gt  lt  --   navbar -- gt    And here s my CSS    navbar-fixed-top  navbar-fixed-bottom position fixed  -webkit-box-shadow  none  -moz-box-shadow  none  box-shadow  none    navbar  nav  gt  li a      color white  background rgba 0 0 0 0 2   text-shadow none  font-size 1 7em  font-family  marvel  serif  padding  5em 1 3em  margin 1em 2em     navbar  nav  gt   active a hover   navbar  nav  gt  li a hover   navbar  nav  gt   active a       color white    background  F90  text-shadow none  font-size 1 7em  font-family  marvel  serif  padding  5em 1 3em  margin 1em 2em     navbar  nav  gt  li  padding 2em    navbar navbar-fixed-top  navbar-inner background  rgba 255  255  255  0     navbar  nav   navbar  nav  gt  li       float none      display inline-block       display inline     ie7 fix         zoom 1     hasLayout ie7 trigger        vertical-align  top      padding 0 2em     navbar-inner  text-align center    navbar  navbar-inner   navbar  navbar-inner  border  none  box-shadow  none  filter  none

User · Answer

Bootstrap 4 - Update 2020  The Affix plugin no longer exists in Bootstrap 4  but now most browsers support position sticky which can be used to create a sticky after scoll Navbar  Bootstrap 4 includes the sticky-top class for this     https   codeply com go oY2CyNiA7A  Bootstrap 3 - Original Answer  Here s a Bootstrap 3 example that doesn t require extra jQuery   it uses the Affix plugin included in Bootstrap 3  but the navbar markup has changed since BS2      lt  -- Content Above Nav -- gt   lt header class  masthead  gt    lt  header gt                lt  -- Begin Navbar -- gt   lt div id  nav  gt     lt div class  navbar navbar-default navbar-static  gt       lt div class  container  gt         lt  --  btn-navbar is used as the toggle for collapsed navbar content -- gt         lt a class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt           lt span class  glyphicon glyphicon-bar  gt  lt  span gt           lt span class  glyphicon glyphicon-bar  gt  lt  span gt           lt span class  glyphicon glyphicon-bar  gt  lt  span gt         lt  a gt         lt div class  navbar-collapse collapse  gt           lt ul class  nav navbar-nav  gt             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt             lt li class  divider  gt  lt  li gt             lt li gt  lt a href     gt Link lt  a gt  lt  li gt             lt li gt  lt a href     gt Link lt  a gt  lt  li gt           lt  ul gt           lt ul class  nav pull-right navbar-nav  gt             lt li gt                            lt  li gt             lt li gt                            lt  li gt           lt  ul gt         lt  div gt               lt  div gt     lt  div gt  lt  --   navbar -- gt   lt  div gt    Working demo template  http   bootply com 69848

User · Answer

This worked great for me  Don t forget to put a filler div in there where the navigation bar used to be  or else the content will jump every time it s fixed unfixed   function setSkrollr        var objDistance    navbar offset   top        window  scroll function             var myDistance     window  scrollTop            if  myDistance  gt  objDistance                navbar addClass  navbar-fixed-top                      if  objDistance  gt  myDistance                navbar removeClass  navbar-fixed-top

User · Answer

Use Bootstrap Affix    x000D   x000D     Note  Try to remove the following lines to see the effect of CSS positioning    x000D     affix   x000D        top  0  x000D        width  100   x000D      x000D   x000D     affix    container-fluid   x000D        padding-top  70px  x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt title gt Bootstrap Example lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D     x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container-fluid  style  background-color  F44336 color  fff height 200px   gt  x000D     lt h1 gt Bootstrap Affix Example lt  h1 gt  x000D     lt h3 gt Fixed  sticky  navbar on scroll lt  h3 gt  x000D     lt p gt Scroll this page to see how the navbar behaves with data-spy  affix   lt  p gt  x000D     lt p gt The navbar is attached to the top of the page after you have scrolled a specified amount of pixels  lt  p gt  x000D   lt  div gt  x000D   x000D   lt nav class  navbar navbar-inverse  data-spy  affix  data-offset-top  197  gt  x000D     lt ul class  nav navbar-nav  gt  x000D       lt li class  active  gt  lt a href     gt Basic Topnav lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Page 1 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Page 2 lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Page 3 lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   lt div class  container-fluid  style  height 1000px  gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D     lt h1 gt Some text to enable scrolling lt  h1 gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

In answer to Shubham Patwa  This way  the page is  jumpy  soon as the class  navbar-fixed-top  applies  That s because the  mainnav is throwen in and out of the document s DOM flow  This can result in an ugly UX if the page has a  critical height   jumping between fixed and un-fixed  mainnav position   I altered the code this way  which seems to work fine  not pixel-perfect  but fine      document  ready function       var navpos       mainnav   offset      var navheight       mainnav   outerHeight       window  bind  scroll   function       if    window  scrollTop    gt  navpos top           mainnav   addClass  navbar-fixed-top          body   css  marginTop  navheight           else            mainnav   removeClass  navbar-fixed-top            body   css  marginTop   0

User · Answer

Note  2015   Both question and the answer below apply to the old  deprecated version 2 x of Twitter Bootstrap   This feature of making and element  sticky  is built into the Twitter s Bootstrap and it is called Affix  All you have to do is to add    lt div data-spy  affix  data-offset-top  121  gt        your navbar      lt  div gt    around your tag and do not forget to load the Bootstrap s JS files as described in the manual  Data attribute offset-top tells how many pixels the page is scrolled  from the top  to fix you menu component  Usually it is just the space to the top of the page   Note  You will have to take care of the missing space when the menu will be fixed  Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll  I am doing the following    lt div style  height  77px   gt     lt div data-spy  affix  data-offset-top  121  gt       lt div style  position  relative  height  0  width  100    gt         lt div style  position  absolute  top  0  left  0   gt              my menu            lt  div gt       lt  div gt     lt  div gt   lt  div gt    where 77px is the height of my affixed component

User · Answer

I have found this simple javascript snippet very useful     document  ready function         var navbar       navbar         navbar after   lt div id  more-div  style  height      navbar outerHeight true     px  class  hidden  gt  lt  div gt         var afternavbar       more-div         var abovenavbar       above-navbar           window  on  scroll   function                 if    window  scrollTop    gt  abovenavbar height                          navbar addClass  navbar-fixed-top                afternavbar removeClass  hidden                      else                       navbar removeClass  navbar-fixed-top                afternavbar addClass  hidden

User · Answer

I was searching for this very same thing   I had read that this was available in Bootstrap 3 0  but I was having no luck in actually implementing it   This is what I came up with and it works great   Very simple jQuery and Javascript   Here is the JSFiddle to play around with    http   jsfiddle net CriddleCraddle Wj9dD   The solution is very similar to other solutions on the web and StackOverflow  If you do not find this one useful  search for what you need   Goodluck   Here is the HTML      lt div id  banner  gt     lt h2 gt put what you want here lt  h2 gt     lt p gt just adjust javascript size to match this window lt  p gt   lt  div gt      lt nav id  nav bar  gt       lt ul class  nav links  gt         lt li gt  lt a href  url  gt Sign In lt  a gt  lt  li gt         lt li gt  lt a href  url  gt Blog lt  a gt  lt  li gt         lt li gt  lt a href  url  gt About lt  a gt  lt  li gt       lt  ul gt     lt  nav gt    lt div id  body div  gt     lt p style  margin  0  padding-top  50px   gt and more stuff to continue scrolling here lt  p gt   lt  div gt    Here is the CSS     html  body     height  4000px      navbar-fixed     top  0    z-index  100    position  fixed    width  100       body div     top  0    position  relative    height  200px    background-color  green      banner     width  100     height  273px    background-color  gray    overflow  hidden      nav bar     border  0    background-color   202020    border-radius  0px    margin-bottom  0    height  30px       the below css are for the links  not needed for sticky nav  nav links     margin  0      nav links li     display  inline-block    margin-top  4px      nav links li a     padding  0 15 5px    color   3498db    text-decoration  none      Now  just add the javacript to add and remove the fix class based on the scroll position     document  ready function         change the integers below to match the height of your upper div  which I called     banner   Just add a 1 to the last number   console log   window  scrollTop        to figure out what the scroll position is when exactly you want to fix the nav     bar or div or whatever   I stuck in the console log for you   Just remove when     you know the position      window  scroll function            console log   window  scrollTop          if    window  scrollTop    gt  550              nav bar   addClass  navbar-fixed-top               if    window  scrollTop    lt  551              nav bar   removeClass  navbar-fixed-top

User · Answer

You could use position  sticky   navbar     position  sticky    top  0px      The  navbar should be a direct child of the body though

User · Answer

in html   lt nav class  navbar navbar-default  id  mainnav  gt   lt nav gt       add in jquery    document  ready function       var navpos       mainnav   offset      console log navpos top         window  bind  scroll   function           if    window  scrollTop    gt  navpos top               mainnav   addClass  navbar-fixed-top                    else                mainnav   removeClass  navbar-fixed-top                              Here is the jsfiddle to play around   -http   jsfiddle net shubhampatwa 46ovg69z    EDIT  if you want to apply this code only for mobile devices the you can use      var newWindowWidth     window  width        if  newWindowWidth  lt  481              Place code inside it

User · Answer

For Bootstrap 4  a new class was released for this  According to the utilties docs   Apply the class sticky-top    lt div class  sticky-top  gt     lt  div gt    For further navbar position options  visit here  Also  keep in mind that position  sticky  is not supported in every browser so this may not be the best solution for you if you need to support older browsers

[javascript] How to create a sticky navigation bar that becomes fixed to the top after scrolling

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to nav