[英]Position fixed is not working
我正在嘗試從本教程中實現持久標頭: http : //css-tricks.com/persistent-headers/
我的標記:
<div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
<h2 class="persist-header">rgergergerg</h2>
<div class="nom-img">
<a href="ergeg.html"><img src="img/ergerg.jpg"></a>
</div>
<div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
<h4><a href="#">serger</a></h4>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area">
<h2 class="persist-header">rgergergerg</h2>
<div class="nom-img">
<a href="ergeg.html"><img src="img/ergerg.jpg"></a>
</div>
<div class="tag-nom postCenter"> <a href="#"><img src="img/erg.png"></a>
<h4><a href="#">serger</a></h4>
</div>
</div>
jQuery的
var clonedHeaderRow;
$(".persist-area").each(function() {
clonedHeaderRow = $(".persist-header", this);
clonedHeaderRow
.before(clonedHeaderRow.clone())
.css("width", clonedHeaderRow.width())
.addClass("floatingHeader");
});
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
function UpdateTableHeaders() {
$(".persist-area").each(function() {
var el = $(this),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
的CSS
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
}
問題是,即使固定位置處於活動狀態,它也無法正常工作。 標題不固定而上升。 可能是什么問題?
這確實是很復雜的方法。 可以輕松完成
您基本上只需要一個額外的div來保存標題大小即可防止頁面混亂
<div class="persistent">
<nav>
<ul>
<li><a href="#alfa" class="button"><span>ALFA</span></a></li>
</ul>
</nav>
</div>
<div class="persistent">
<nav>
<ul>
<li><a href="#beta" class="button"><span>ALFA</span></a></li>
</ul>
</nav>
</div>
然后,您只需要一個簡單的jQuery
function fixMenu()
{
$('.persistent').each(function(){
var menu_place = $(this).offset().top;
var menu = $(this).find('nav');
$(window).scroll(function(){
var scroll_top = $(window).scrollTop();
if ( scroll_top > menu_place )
{
menu.css({ 'position': 'fixed', 'top':0 });
}
else
{
menu.css({ 'position': 'relative' });
}
});
}
您需要做的就是從Document ready調用函數fixMenu()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.