引导程序标头滚动偏移 [英] Bootstrap header Scroll Offset
本文介绍了引导程序标头滚动偏移的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在导航中有一个徽标和标题,如下所示:
I have a logo and a header with my Navigation like this:
<div id="logohead">
//...
</div>
<header id="header" class="affix navbar navbar-static" data-spy="affix" role="banner">
//...
</header><!--/#header-->
在我的页脚中,我这样做:
in my Footer i do this:
<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中. 我的问题是某些页面尺寸的页面跳动.如果浏览器大小特殊,某些页面开始跳转,我的脚本不起作用.有解决办法吗?
i want to resize my logotext which is in the header. the logo picture is in #logohead. my problem is the jumping of the page in certain page sizes. if there is a special size of the browser, some pages start to jump and my script is not working. is there a fix?
http://jsfiddle.net/am59aakg/1/
我认为找到了解决方案: 它可以减少跳跃,但仍然不够完美.
thought i found a solution: it makes less jumping but still not perfect.
刚刚添加
.affix + .container {
padding-top:50px
}
但没有
推荐答案
这或多或少......
this makes it working ...more or less...:
.affix + div {
margin-top:80px;
}
.affix + .page-header {
margin-top:100px;
}
第一次尝试是(不起作用):
first try was (not working):
`.affix + .container {
padding-top:50px
}`
这篇关于引导程序标头滚动偏移的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文