使用词缀时Bootstrap导航栏重叠的内容 [英] Bootstrap navbar overlapping content when using affix

问题描述

我想要

• 在导航栏下方的网站横幅
• 向下滚动时横幅消失，但是导航栏 保持不变

• A site banner with a navbar below
• The banner to disappear when scrolling down, but the navbar to remain fixed

我找到了提供上述解决方案的jsfiddle: http://jsfiddle.net/DTcHh/541/

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

代码的两个要点:

//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?

推荐答案

您需要通过将padding-top添加到等于固定元素高度的body元素来置换固定的.navbar元素.

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

您可以收听 affix.bs.affix/affix-top.bs.affix事件，然后确定是否padding应等于元素的height或将其删除:

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:

更新示例 -您看到的跳转不再发生.

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

这篇关于使用词缀时Bootstrap导航栏重叠的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！