How to Bootstrap navbar static to fixed on scroll

Question

I would like to make static navbar to fixed navbar on scroll  when it reaches top of the page   Is there a way to get it using bootstrap 3 css or javascript

User · Answer

If you are using Bootstrap 4  which is the latest version as writing this answer  the assingments have changed a bit  Here is an example of a navbar fixed on top    lt nav class  navbar fixed-top navbar-light bg-light  gt       lt a class  navbar-brand  href     gt  lt h1 gt Navbar lt  h1 gt  lt  a gt   lt  nav gt

User · Answer

x000D   x000D      x000D     Scroll management x000D      x000D    document  ready function      x000D   x000D         Define the menu we are working with x000D      var menu       navbar navbar-default navbar-inverse    x000D   x000D         Get the menus current offset x000D      var origOffsetY   menu offset   top  x000D   x000D          x000D         scroll x000D         Perform our menu mod x000D          x000D      function scroll     x000D   x000D             Check the menus offset   x000D          if    window  scrollTop    gt   origOffsetY    x000D   x000D                If it is indeed beyond the offset  affix it to the top  x000D                menu  addClass  navbar-fixed-top    x000D   x000D            else   x000D   x000D                 Otherwise  un affix it  x000D                menu  removeClass  navbar-fixed-top    x000D   x000D            x000D        x000D   x000D         Anytime the document is scrolled act on it x000D      document onscroll   scroll  x000D   x000D      x000D   navbar-wrapper  x000D      background url  http   www wallpaperup com uploads wallpapers 2012 10 21 20181 cad2441dd3252cf53f12154412286ba0 jpg    x000D      height  100vh  x000D    padding-top  50px  x000D    x000D   x000D  h1  x000D    font-size  50px  x000D    font-weight  700  x000D    x000D   x000D   login-dp  x000D      min-width  250px  x000D      padding  14px 14px 0  x000D      overflow hidden  x000D      background-color rgba 255 255 255  8   x000D    x000D   login-dp  help-block  x000D      font-size 12px     x000D    x000D   login-dp  bottom  x000D      background-color rgba 255 255 255  8   x000D      border-top 1px solid  ddd  x000D      clear both  x000D      padding 14px  x000D    x000D   login-dp  social-buttons  x000D      margin 12px 0     x000D    x000D   login-dp  social-buttons a  x000D      width  49   x000D    x000D   login-dp  form-group   x000D      margin-bottom  10px  x000D    x000D   btn-fb  x000D      color   fff  x000D      background-color  3b5998  x000D    x000D   btn-fb hover  x000D      color   fff  x000D      background-color  496ebc  x000D    x000D   btn-tw  x000D      color   fff  x000D      background-color  55acee  x000D    x000D   btn-tw hover  x000D      color   fff  x000D      background-color  59b5fa  x000D    x000D   media max-width 768px   x000D       login-dp  x000D          background-color  inherit  x000D          color   fff  x000D        x000D       login-dp  bottom  x000D          background-color  inherit  x000D          border-top 0 none  x000D        x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt link href    maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  rel  stylesheet  gt  x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt body gt  x000D   lt div class  navbar-wrapper  gt    x000D     lt div class  container  gt  x000D       lt nav class  navbar navbar-default navbar-inverse  role  navigation  gt  x000D     x000D       lt  -- Brand and toggle get grouped for better mobile display -- gt  x000D       lt div class  navbar-header  gt  x000D         lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt  x000D           lt span class  sr-only  gt Toggle navigation lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D         lt  button gt  x000D         lt a class  navbar-brand  href     gt Login dropdown lt  a gt  x000D       lt  div gt  x000D   x000D       lt  -- Collect the nav links  forms  and other content for toggling -- gt  x000D       lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt  x000D           lt ul class  nav navbar-nav  gt  x000D             lt li class  active  gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Link lt  a gt  lt  li gt  x000D             lt li class  dropdown  gt  x000D               lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D               lt ul class  dropdown-menu  role  menu  gt  x000D                 lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                 lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                 lt li class  divider  gt  lt  li gt  x000D                 lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D               lt  ul gt  x000D             lt  li gt  x000D           lt  ul gt  x000D         x000D         lt  div gt  lt  --   navbar-collapse -- gt  x000D       lt  nav gt  x000D     lt  div gt  lt  -- container -- gt  x000D   lt  div gt  lt  --   navbar-wrapper -- gt  x000D     x000D    lt section gt  x000D      lt div class  container  gt  x000D        lt div class  row  gt  x000D          lt h1 gt Content lt  h1 gt  x000D          lt p gt  x000D           Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi congue luctus placerat  Sed nisl sem  pellentesque at risus eget  consequat bibendum velit  Sed interdum accumsan luctus  Duis rhoncus suscipit hendrerit  Vestibulum ut lobortis diam  Donec magna est  euismod non ligula in  congue aliquet diam  Sed pellentesque erat nibh  et blandit quam auctor eget  Integer fringilla turpis ac sagittis mattis  In in metus posuere  tincidunt orci non  lobortis ipsum  Praesent porttitor orci a ligula facilisis porta  Nullam tincidunt feugiat dignissim  x000D          lt  p gt  x000D          lt p gt  x000D           Pellentesque cursus suscipit massa ut molestie  Duis malesuada consequat venenatis  Vestibulum accumsan lorem sit amet vehicula tristique  Donec nec mauris quis mi imperdiet vestibulum  Praesent tempor velit at posuere posuere  Mauris tellus diam  dictum sed molestie eu  lobortis nec diam  Mauris molestie nulla vulputate  lobortis urna eget  gravida erat  Phasellus in ullamcorper lacus  eget ullamcorper odio  x000D          lt  p gt  x000D          lt p gt  x000D           Quisque gravida nulla eros  Duis sit amet rhoncus felis  Etiam in malesuada nisl  Proin sit amet elit sit amet erat dapibus pretium  Duis a dignissim lacus  vitae mollis nunc  Donec ut tempor magna  Maecenas eget felis eget ipsum porttitor dapibus vitae vitae magna  Cras et felis eros  Nam dolor odio  bibendum ut ex eu  facilisis suscipit ipsum  Aliquam sit amet nunc volutpat  aliquet nunc ut  tempor augue  Pellentesque semper vestibulum lacinia  Nam lacinia erat interdum purus consequat elementum  Phasellus volutpat sed libero id molestie  Quisque nec iaculis nisl  vitae accumsan justo  Suspendisse sollicitudin metus in libero cursus tempor in eget enim  x000D          lt  p gt  x000D          lt p gt  x000D           Suspendisse nibh lacus  consequat et tincidunt eget  interdum mollis velit  Etiam lobortis ac tellus et pretium  Nunc a tincidunt nulla  Cras vel nulla in neque accumsan fermentum  Etiam ac erat leo  Vestibulum aliquam dignissim lectus  tincidunt consequat augue malesuada at  Pellentesque semper viverra elit quis vestibulum  Aliquam rutrum justo dignissim ligula fringilla  ac viverra metus efficitur  x000D          lt  p gt  x000D          lt p gt  x000D           Mauris quis nisi convallis  rhoncus odio non  sodales urna  Donec ac ante at nisi pulvinar eleifend  Duis vel suscipit est  Nullam quis aliquet eros  Maecenas tincidunt augue condimentum nisi pharetra  in molestie libero condimentum  In hac habitasse platea dictumst  Morbi quis elit id nunc faucibus egestas  Sed non vehicula ligula  quis viverra urna  Nunc nec eleifend elit  Sed aliquam nibh non turpis congue  a condimentum mauris dictum  Vivamus laoreet nulla vel elit consequat  non convallis nibh dapibus  Mauris maximus nibh maximus  sollicitudin odio nec  semper nunc  Nunc consequat convallis lobortis  Aliquam pulvinar porttitor lorem  Donec luctus  libero a interdum posuere  est tellus tincidunt risus  a fermentum lacus odio at metus  Donec maximus ante massa  imperdiet consequat magna lobortis sed  x000D          lt  p gt  x000D        lt  div gt  x000D      lt  div gt  x000D    lt  section gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Here s a solution using Bootstrap s affix plugin   HTML    lt header class  container-fluid  gt           lt  header gt   lt nav class  navbar navbar-default navbar-static-top  role  navigation  gt           lt  nav gt    Javascript      nav   affix         offset            top     header   height                 Set padding-top to your body equal to that of your nav s height so that the content overlayed by the fixed navbar is visible      nav   on  affix bs affix   function             body   css  margin-top      nav   height             nav   on  affix-top bs affix   function             body   css  margin-top   0         To get the nav to stick on top while scrolling add this bit of CSS   CSS    affix       top  0

User · Answer

I am note sure  what you are expecting  Have a look at this fiddle  this might help you   http   jsfiddle net JK52L 8   You HTML should have the class navbar-fixed-top or navbar-fixed-bottom   HTML   lt nav class  navbar navbar-default navbar-fixed-top  role  navigation  gt     lt  -- Brand and toggle get grouped for better mobile display -- gt     lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt         lt span class  sr-only  gt Toggle navigation lt  span 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  button gt       lt a class  navbar-brand  href     gt Brand lt  a gt     lt  div gt      lt  -- Collect the nav links  forms  and other content for toggling -- gt     lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt       lt ul class  nav navbar-nav  gt         lt li class  active  gt  lt a href     gt Link 1 lt  a gt  lt  li gt         lt li gt  lt a href     gt Link 2 lt  a gt  lt  li gt       lt  ul gt     lt  div gt  lt  --   navbar-collapse -- gt   lt  nav gt    JS    document  scroll function e       var scrollTop     document  scrollTop        if scrollTop  gt  0           console log scrollTop               navbar   removeClass  navbar-static-top   addClass  navbar-fixed-top          else               navbar   removeClass  navbar-fixed-top   addClass  navbar-static-top

User · Answer

hey all everyone is over thinking this all you need to do is wrap the nav in a  like below   csscode    navwrap         height  100px     change dependant on hight of nav      width  100       margin  0      padding-top  5px      HTML    lt div id  navwrap  gt      nav code inside  lt  div gt

User · Answer

Here is my implementation using the Affix Bootstrap plugin http   getbootstrap com javascript  affix  It includes some extra affix problems solved  see below     HTML    lt nav class  navbar navbar-inverse navbar-fixed-top  id  top navbar  gt     lt div class  container-fluid  gt       typical Bootstrap top navbar     lt  div gt   lt  div gt                 lt div id  parent-navbar-main   gt     lt div id  navbar-main  gt       here is your nav panel to get sticky on scroll     lt  div gt   lt  div gt    Javascript   function set sticky panel         var affixElement       navbar-main       var navbarElementHeight       top navbar   height        http   stackoverflow com questions 18683303 bootstrap-3-0-affix-with-list-changes-width   var width   affixElement parent   width      affixElement width width       http   stackoverflow com questions 3410765 get-full-height-of-element   var affixElementHeight       navbar-main   outerHeight true       https   finiteheap com webdev 2014 12 26 bootstrap-affix-flickering html     affixElement parent   height affixElementHeight       http   stackoverflow com questions 23797241 resetting-changing-the-offset-of-bootstrap-affix     window  off   affix     affixElement removeData  bs affix   removeClass  affix affix-top affix-bottom       affixElement affix       offset           Distance of between element and top page       top  function               how much scrolling is done until sticking the panel         return  this top   affixElement offset   top - parseInt navbarElementHeight 10                             The replacement for the css-file    affixElement on  affix bs affix   function          the absolute position where the sticked panel is to be placed when the fixing event fires  e g  the panel reached the top of the page       affixElement css  top   navbarElementHeight    px        affixElement css  z-index   10               document  on  ready   set sticky panel      window  resize set sticky panel     CSS      No css is required    If to compare with the standart implementation my code additionaly solves these problems    The width of the sticky panel does not break at the fixing event anymore  The need in the CSS-file usage is eliminated  Reformatting the sticky panel size on the window change size event  responsiveness  is done now  No more affix flittering   jumping at the fixing event

User · Answer

I faced the same problem but the solution that worked for me was   HTML    lt header class  container-fluid  gt           lt  header gt   lt nav class  row  gt       lt div class  navbar navbar-inverse navbar-static-top  gt                   lt  div gt   lt  nav gt    JavaScript   document onscroll   function         if    window  scrollTop    gt     header   height                  nav  gt  div navbar   removeClass  navbar-static-top   addClass  navbar-fixed-top              else              nav  gt  div navbar   removeClass  navbar-fixed-top   addClass  navbar-static-top               Where header was the banner tag above my navigation bar

User · Answer

Use the affix component included with Bootstrap  Start with a  navbar-static-top  and this will change it to fixed when the height of your header  content above the navbar  is reached         nav   affix         offset            top     header   height                  http   bootply com 107973

User · Answer

Scroll management       document  ready function          Define the menu we are working with var menu       navbar navbar-default navbar-inverse        Get the menus current offset var origOffsetY   menu offset   top          scroll    Perform our menu mod     function scroll             Check the menus offset       if    window  scrollTop    gt   origOffsetY               If it is indeed beyond the offset  affix it to the top            menu  addClass  navbar-fixed-top           else               Otherwise  un affix it            menu  removeClass  navbar-fixed-top                 Anytime the document is scrolled act on it document onscroll   scroll

User · Answer

Set on nav  style  position fixed  width 100

User · Answer

set max-height as you need    navbar-fixed-top   navbar-collapse    navbar-fixed-bottom   navbar-collapse       max-height  700px

User · Answer

If I m not wrong  what you re trying to achieve is called Sticky navbar    With a few lines of jQuery and the scroll event is pretty easy to achieve     document  ready function          var menu       menu        var content       content        var origOffsetY   menu offset   top       function scroll             if    window  scrollTop    gt   origOffsetY                menu addClass  sticky                content addClass  menu-padding              else               menu removeClass  sticky                content removeClass  menu-padding                           document  scroll           I ve done a quick working sample for you  hope it helps   http   jsfiddle net yeco 4EcFf   To make it work with Bootstrap you only need to add or remove  navbar-fixed-top  instead of the  sticky  class in the jsfiddle

User · Answer

If you handle the code like this     lt div class  scroll  gt    lt div class  menu  gt home   services   contact lt  div gt   lt  div gt    And css     scroll     margin-bottom 50px     menu     position absolute    background  428bca    color  fff    line-height 30px    letter-spacing 1px    width 100     height 50px     menu-padding        no  style here anymore      Then the annoying scroll is gone    The compleet code and fiddle is not originally made by me  I got it from an earlier answer in this topic  The change in the code is made by me  Fabian  Web-Stars  jsfiddle

User · Answer

The question is a bit older  it s solved by CSS and latest bootstrap natively     If you add the class sticky-top to your navbar it will behave just like the javascript jquery in the best current answer but without any javascript  Browser support is quite decent but not perfect

User · Answer

Or you can change position of specific div using class name     document  scroll function e       var scrollTop     document  scrollTop        if scrollTop  gt  0             console log scrollTop               header   css  position   fixed          else                header   css  position   relative

[javascript] How to Bootstrap navbar static to fixed on scroll?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3