CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
mejobloggs
mejobloggs

Reputation: 8156

Bootstrap navbar overlapping content when using affix

I want

I found this jsfiddle which provides the above solution: http://jsfiddle.net/DTcHh/541/

Two main points of code:

//js
$('#topnavbar').affix({
    offset: {
        top: $('#banner').height()
    }   
});

//css
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

My problem now is when you scroll down to the point where the 'affix' happens. If you look carefully at that point it kinda jumps, and now the navbar is overlapping the first 4 lines in the paragraph

Any ideas how to get rid of that overlap?

Upvotes: 2

Views: 1477

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240948

You need to displace the fixed .navbar element by adding padding-top to the body element equal to the height of the fixed element.

You can listen to the affix.bs.affix/affix-top.bs.affix events and then determine whether the padding should be equal to the element's height or removed:

Updated Example - the jump you were seeing no longer occurs.

$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) {
    var padding = e.type === 'affix' ? $(this).height() : '';
    $('body').css('padding-top', padding);
});

Upvotes: 3

PRANAVSAI DEENUMSETTI
PRANAVSAI DEENUMSETTI

Reputation: 1

Add "z-index:10;" to your topnavbar.affix class in css.

position: fixed;
top: 0;
width: 100%;
z-index:10;

Upvotes: -1

Related Questions