引导标头滚动偏移



我有一个带有导航的徽标和标题,如下所示:

<div id="logohead">
//...
</div>   
<header id="header" class="affix navbar navbar-static" data-spy="affix" role="banner">
//...
</header><!--/#header-->

在我的页脚中,我这样做:

<SCRIPT type="text/javascript">
$(document).ready(function(){

$('#header').affix({
      offset: {
        top: $('#logohead').height()
      }
}); 
    $(window).scroll(function(){
    if ($(document).scrollTop() > 100) {
        $('#header').addClass('shrink');
    } else {
        $('#header').removeClass('shrink');
    }    
    });
});
</SCRIPT>

我想调整标题中的徽标文本的大小。 徽标图片为 #logohead。我的问题是页面在某些页面大小下跳转。如果浏览器有特殊大小,某些页面开始跳转,我的脚本不起作用。有修复吗?

编辑:http://jsfiddle.net/am59aakg/1/

以为我找到了解决方案:它使跳跃较少,但仍然不完美。

刚刚添加

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

但它没有

这使它可以工作...或多或少。。。:

.affix + div {
    margin-top:80px;
}
.affix + .page-header {
    margin-top:100px;
}

第一次尝试是(不起作用):

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

相关内容

  • 没有找到相关文章

最新更新