SORU
22 AĞUSTOS 2012, ÇARŞAMBA


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
31 EKİM 2012, ÇARŞAMBA


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());

Here's the obligatory jsFiddle to see it in action.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CrazyMan

    CrazyMan

    14 Mayıs 2008
  • Nickcidious

    Nickcidious

    6 HAZİRAN 2011
  • snookie77

    snookie77

    2 Mart 2006