Nasıl'In twitter bootstrap 2.1.0 yeni ek eklenti kullanmak için?
Bu konuda bootstrap belgeleri bana biraz kafa karıştırıcı. İstediğimi elde etmek için benzer bir davranış gibi dokümanlar ile tutturmak gezinti çubuğu: gezinti çubuğu aşağıda bir paragraf / sayfa başlığı ve üzerine aşağı kaydırma gereken ilk kaydırma boyunca kadar ulaşan sayfanın üstüne ve sonra da sopa orada sabit için daha scrolldowns.
JsFiddle gezinti çubuğu kavramı ile çalışmıyor gibi, minimal bir örnek olarak kullanım için ayrı bir sayfa kurdum: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Benim gezinti çubuğu olarak bunu kullanın:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
data-offset-top
değeri 0 (bar beri "" çok üst" ama en azından bazı etkisi vardır 50 ile izlenebilir. destek olmalıyız olmasını isterim ben thinkg
Ayrıca yer: javascript kodu koymak
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Herhangi bir yardım için teşekkür ederiz.
CEVAP
Benzer bir problemim vardı ve daha iyi bir çözüm buldum sanırım.
HTML data-offset-top
belirtme zahmet etmeyin. Bunun yerine, .affix()
aradığınızda belirtin:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
Burada avantaj data-offset-top
öznitelik güncelleştirmek için gerek kalmadan sitenizin düzenini değiştirebilirsiniz. Bu öğenin gerçek hesaplanan pozisyon kullandığından, bu da biraz farklı bir konumda öğesi işleyen tarayıcılar ile tutarsızlıkları önler.
Hala CSS ile üst öğe kelepçe gerekir. Ayrıca, .nav
position: fixed
yaramazlık ile element olduğundan nav öğesi width: 100%
set nedense vardı:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
Son bir şey: yapıştırılmış bir element sabit Olduğunda, onun bir unsuru artık sayfada boşluk, altındaki elemanları ile sonuçlanan alır"". atlamak için Bu çirkinliği önlemek için, zamanında gezinti çubuğu eşit olacak şekilde ayarladım olan: div
gezinti çubuğu kaydır
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Nasıl bir Jquery fonksiyonu (yeni bir ...
Nasıl twitter bootstrap menü hover yer...
Nasıl dinamik olarak oluşturulan öğele...
Nasıl dışarıda tıklayarak Twitter Boot...
Etkisi aşağı Kaydırın kaldırmak için N...