24

I've created a JSFiddle using Bootstrap's affix function to make a nav stay at the top of the screen once you scroll down and the header moves out of view.

The problem I'm having is that when using pure HTML, the text below the nav jumps up and hides behind the nav too early.

Check out the problematic code here.

Here's the code I used:

<div class="container">
<div class="row">
    <div class="span12">
        <div class="well">
            <h1>Banner</h1>
        </div>
    </div>
</div>
</div>
<div class="nav-wrapper">
<div class="nav navbar affix" data-spy="affix" data-offset-top="120">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a>
                <span class="navbar-text">
                    This is a navbar.
                </span>
            </div>    
        </div>
    </div>
</div>
</div>
<div class="container">
<div class="span3">
    <h2>some lorem ipsum for scrolling:</h2>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>

The CSS is as follows:

.affix {
    position: fixed;
    top: 0;
    width: 100%
}

I found a very similar problem here but when using the code as in that example, for some reason it doesn't work for me.

The extra piece of CSS that did the trick is as follows:

.affix + .container {
    padding-top:50px
}

I'm also aware of JavaScript solutions such as this one here which uses the following code to create the desired effect:

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

I'm just trying to figure out why my particular HTML-only version is not behaving when implementing the previous fix using the CSS padding-top fix.

Thank you in advance for your assistance.

Community
  • 1
  • 1
Pein
  • 261
  • 1
  • 2
  • 7
  • Your jsFiddle link doesn't work. Did you mean http://jsfiddle.net/Pein/yYE62/2/ ? – Tieson T. Dec 18 '13 at 08:08
  • Yes version 2 works but for some reason my version 3 link goes to an error page. Well it's basically the same code. Sorry about that. I've edited it now. – Pein Dec 18 '13 at 10:05

2 Answers2

48

This seems to work:

.nav-wrapper
{
    min-height:50px;
}

Updated jsFiddle: http://jsfiddle.net/yYE62/5/

What's happening is that the affix plugin makes the element with the .affix class have a fixed position in the document. This removes the affixed element from the flow (or layout, if you prefer) and causes the container to collapse. When that happens, the content below slides up to fill the space that the affixed element used to occupy.

By adding the rule above, you tell that container to maintain a minimum height regardless of whether it has content or not. It doesn't have to be 50px; that's the default height of .navbar, so adjust to match your needs. If you don't want all .nav-wrappers to have a minimum height, assign an id and use that instead.

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
  • Thanks Tieson. I thought that's what the issue was and used that exact line of code myself in another JSFiddle version, however it still has the same jump effect which is why it's confusing me. You'll notice the h2 content jumps up behind the navbar too soon, even with the 120px padding. – Pein Dec 18 '13 at 10:12
  • @Pein Updated answer; new jsFiddle seems to work, but I've only exercised it in Firefox, so caveat emptor. – Tieson T. Dec 19 '13 at 01:23
  • What an elegant solution. Thank you so much for reworking the solution and explaining what is happening and why. I really appreciate it! Fantastic job :) – Pein Dec 19 '13 at 11:58
  • 1
    It needs an extra wrapper, but an elegant solution neverthless – lolski May 14 '14 at 08:18
  • 2
    If you find that it still jumps, try playing around with margin-bottom on nav-wrapper in addition to min-height. My .navbar has margin-bottom: 20px; and adding that to .nav-wrapper makes everything smooth again. – shrmn Sep 25 '14 at 09:51
  • I implemented this solution with smooth scroll for navs and all the nav targets were working(aligning perfectly) by reducing the smooth scroll offset by navbar height (say 60px) and for the nav target immediately after navbar adjustment was 1px lesser (i.e. 59px) – kewlashu Jul 31 '15 at 16:15
  • 3
    This still makes it jump. This is not the answer. – ajbraus Oct 07 '15 at 22:53
  • @ajbraus The linked jsFiddle does not demonstrate that. Can you create one that does show the "jump" still happening? It's worth noting that this was for version 2.1 - version 3+ may behave differently. – Tieson T. Oct 08 '15 at 18:27
  • 1
    The jsfiddle still jumps - when you grab the scroll bar and then slow drag it down you will notice a jump...? – Andrew Feb 21 '17 at 06:27
  • as @shrmn mentioned - adding a margin-bottom:20px to your jsfiddle fixed that little jump. – Andrew Feb 21 '17 at 06:29
  • @Andrew As I've said before, the fiddle doesn't demonstrate that, at least in the browsers I've tested it in. Also: this was for Bootstrap **2.1** - if you just use the code from the fiddle with Bootstrap **3** or newer, there probably will be a jump, since the CSS is not the same. – Tieson T. Feb 22 '17 at 00:14
  • 1
    @TiesonT. I understand that when you posted this answer it was indeed working 100% in 2013 - Now however with browser updates etc, it is not the best solution on Chrome, IE or Edge. Answers on stackoverflow need to evolve in order to stay correct - this helps everyone in the community. – Andrew Feb 22 '17 at 06:57
  • @Andrew I'm not getting your point. If I load the linked fiddle **right now** in any browser I have available, I don't see the jump you're claiming is there. – Tieson T. Feb 22 '17 at 07:13
  • @TiesonT. This is on Google Chrome: https://nimbus.everhelper.me/client/notes/share/779407/peaxni0uecdr26tdizwi – Andrew Feb 22 '17 at 07:42
  • 1
    I forked the JSFiddle and experimented: looks like adding height:100%; and accounting for a 20px margin-bottom on .nav helps fix the issue in Chrome. Seems like a hack to me though :/ - http://jsfiddle.net/g6v0p8hy/ – alanvitek May 23 '17 at 14:33
-1

You need an extra wrapper for that to work flawlessly. Give it a minimum-height exactly same as the one you're affix`in :)

Ven Francis
  • 67
  • 1
  • 7
  • What do i do if i don't have an extra wrapper? Its part of the Joomla template and I dont want to edit the php. – user3108698 Aug 17 '15 at 19:32