我使用Bootstrap的附加功能创建了一个JSFiddle,一旦向下滚动并且标题移出视图,导航就会停留在屏幕顶部.

我遇到的问题是,当使用纯HTML时,导航下方的文本会跳起并过早地隐藏在导航器后面.

在这里查看有问题的代码.

这是我使用的代码:

    

        

            
Banner
        
    




    

        

            

                My Brand
                
                    This is a navbar.
                
            
    
        
    




    
some lorem ipsum for scrolling:
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS如下:

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

我在这里发现了一个非常类似的问题,但在使用该示例中的代码时,由于某种原因它对我不起作用.

执行该技巧的额外CSS如下:

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

我也知道JavaScript的解决方案,如这一个在这里,它使用下面的代码来创建所需的效果:

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

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

我只想弄清楚为什么我的特定HTML版本在使用CSS padding-top修复实现上一个修复时不起作用.

提前感谢您的协助.