Bootstrap 3 Scrollspy etkin durumu kaldırın

Bootstrap'i scrollspy ve sabit bir başlık kullanarak kullanan bir sitem var. İyi çalışıyor, ancak scrollspy ile ilgili bir sorunla karşılaştım. Sayfada ana gezintinin parçası olmayan birkaç bölüm var. Bu bölümlere girdiğinizde, en yeni 'aktif' bağlantı kalır. En kolay Turp sorunu göstermek için: Bootstrap 3 Scrollspy etkin durumu kaldırın

http://jsfiddle.net/eric1086/R7S9t/1/

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
    <ul class="nav"> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
    </ul> 
</nav> 

<section class="no-spy"> 
    Don't spy me! 
</section> 
<section class="block" id="first"> 
    First 
</section> 
etc...

Temelde sadece gezinme çubuğu gelen hedeflenen eleman aslında gösteriyor gösterilmeye aktif devlet istiyoruz. Herhangi bir fikir? Şimdiden teşekkürler!

kaynak

2014-04-07 erh86

Aynısı bana da oldu, benim yaptığım şey buydu.
Bunu yapmanın en iyi yolu olup olmadığını bilmiyorum ama işe yarıyor. http://jsfiddle.net/ZGsPm/1/

Sen (örnekte "görmezden") sizin gözardı bölümler gitmek ekstra liste öğeler eklemek ve onlara bir sınıf ekleyebilir ve bir id:
İşte keman kod var.

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
    <ul class="nav"> 
    <li class="ignore"><a href="#no-spy-first"></a></li> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
    <li class="ignore"><a href="#no-spy-second"></a></li> 
    </ul> 
</nav>

Ardından, karşılık gelen kimliği bu bölümlere eklersiniz, böylece bunları liste öğesinden gönderebilirsiniz.

<section class="no-spy" id="no-spy-first"> 
    Don't spy me! 
</section> 

<section class="block" id="first"> 
    First 
</section> 
... 
<section class="no-spy last" id="no-spy-second"> 
    Don't spy me! 
</section>

Ve nihayet, (eğer scrollspy fonksiyon denir sonra) JavaScript: Bu yardımcı olur

$('.ignore').css({'visibility':'hidden', 'width':'0%'});

Umut!

kaynak

2014-07-31 05:34:07 Javi

Teşekkürler! Bu kesinlikle çalışır - akıllı bir çözüm. Bu, Scrollspy'de uygulamak için güzel bir özellik olacaktır - ideal olarak ek liste öğeleri eklemenize gerek kalmadan. – erh86

Bu çalışır, ama '.ignore' sınıfı için ihtiyacınız olan tek CSS olduğuna inanıyorum 'display: none; '. Bu şekilde, nav hem tam genişlikte hem de daraltıldığında çalışır. – 585connor

Bootstrap 3 Scrollspy etkin durumu kaldırın

cevap

İlgili konular