好的,这是我要问的一个例子, 导航栏usatoday。
我使用bootstrap词缀。这是我的代码
<div class="header">
<div class="header-1">
<h1>this is some logo</h1>
</div>
<div class="header-2">
<h3>this is some heading</h3>
</div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
this is a footer
</div>
的JavaScript
$('.header-2').affix({
});
如何将div header-2
固定在顶部,(当有一些滚动且div header-2
刚刚到达顶部位置时)我所在的网站前面提到过吗?
我希望看到header-1
和header-2
,但有些滚动会隐藏header-1
并将header-2
加到最顶端。
感谢
答案 0 :(得分:13)
请参阅此Jsfiddle
您可以检查滑块的位置并相应地添加类
$(window).scroll(function () {
if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
$('#header-2').addClass('posi');
} else if ($(window).scrollTop() == 0){
$('#header-2').removeClass('posi');
}
});
答案 1 :(得分:5)
使用jquery看看这个例子 http://jsfiddle.net/5n5MA/2/
var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() { // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else { // Make it static if you scroll above
$('.fixme').css({
position: 'static'
});
}
});
答案 2 :(得分:3)
使用Bootstrap.affix()
$('.header-2').affix({
offset: {
top: function () {
return (this.top = $(".header-2").offset().top);
}
}
});
这也需要CSS用于固定定位(参见Docs)。
词缀插件在三个类之间切换,每个类代表一个 特定状态:.affix,.affix-top和.affix-bottom。你必须 自己提供这些类的样式(独立于此 插件)处理实际位置。
.header-2.affix {
top: 0;
}
Bootply的工作示例:http://www.bootply.com/S03RlcT0z0
答案 3 :(得分:1)
<style>
.header {
top: 0%;
left: 0%;
width: 100%;
position:fixed;
}
</style>
抱歉,我没有仔细看你的问题。
这可能对您有所帮助Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location