1

I have a simple navbar that is placed under a header. When the use has scrolled past the header I want the navbar to become fixed.

The problem is that when the user has reached the offset, the navbar becomes fixed, but the pages seems to be scrolled for the height of the navbar + the 20px bottom-margin it is applied.

http://jsfiddle.net/WzphN/

The example looks pretty much like what I'm working on except that the header is not a title like this but a responsive carousel instead.

Since it is responsive I used Javascrip to launch the affix effect.

        $('#nav').affix({
        offset : {  
            top : function() { 
                return $('#header').height(); 
                }
         }  
     });

What I understand is that when the browser has scrolled past the height of the header (500 in my example) the #nav element will be applied the affix class. But why does it jump down like that?

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
David
  • 1,101
  • 5
  • 19
  • 38

1 Answers1

2

You will have to set top: {heightofyournavbar} for the .affix class in your css.

.affix {
  position: fixed;
  top: 50px;
}

See also: data-offset-bottom in Bootstrap3 Affix

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • This only places my navbar 50 px from top when the offset is reached which create a gap between the top and the navbar. Can you explain why you thought this could be the solution? Maybe I could understand better. – David Oct 09 '13 at 12:16
  • If you don't scroll your div will have the class affix-top, after scroll to your offset.top position this class will change to affix. So the .affix (with position top 50px and fixed) will be onlt applied after your offset.to (set by javascript) – Bass Jobsen Oct 09 '13 at 12:46
  • Yeah I understand that part, but then when I set .affix{top:50px;}, it tells the browser to place the navbar 50 px from top when I reach the offset. – David Oct 09 '13 at 13:22
  • sorry, i was wrong about the 50px, cause you affix the navbar. You will have to consider https://github.com/twbs/bootstrap/issues/10670 in this case. – Bass Jobsen Oct 09 '13 at 17:35
  • Any idea on what is causing the behavior? – David Oct 10 '13 at 12:34
  • I found this : http://stackoverflow.com/questions/15176990/twitter-bootstrap-affixed-navbar-div-below-jumps-up That solved it for now. Like the guy says, it probably wont support older browser on the spot but until I can implement a rock solid solution, it seems to do the job. – David Oct 23 '13 at 02:23