我有一个带有导航的徽标和标题,如下所示:
<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
}`