Bootstrap 3 Scrollspy usuń aktywny stan

Mam witrynę za pomocą Bootstrapa z scrollspy i ustalonym nagłówkiem. Mam to działa dobrze, ale mam problem z scrollspy. Na stronie znajduje się kilka sekcji, które nie są częścią głównej nawigacji. Kiedy znajdujesz się w tych sekcjach, pozostaje ostatni aktywny link. Najłatwiej wykazać problem w ryba:Bootstrap 3 Scrollspy usuń aktywny stan

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...

Zasadniczo chcę tylko stan aktywny pokazać gdy skierowane Element z paska nawigacyjnego jest rzeczywiście pokazano. Jakieś pomysły? Z góry dziękuję!

Źródło

2014-04-07 erh86

To samo stało się ze mną, to właśnie zrobiłem.
Nie wiem, czy to najlepszy sposób na zrobienie tego, ale działa.
Oto kod w swoim skrzypce: http://jsfiddle.net/ZGsPm/1/

dodać dodatkowe elementy listy gdzie ignorowane odcinki Idź i dodać je do klasy („ignoruj” w przykładzie) oraz id.

<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>

Następnie należy dodać odpowiedni identyfikator do tych sekcji, aby można było odwoływać się do nich z elementu listy.

<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>

I wreszcie, w JavaScript (po nazwie funkcji scrollspy):

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

Nadzieja to pomaga!

Źródło

2014-07-31 05:34:07 Javi

Dzięki! To na pewno działa - sprytne obejście. Byłaby to dobra funkcja do implementacji w Scrollspy - idealnie bez potrzeby dodawania dodatkowych elementów listy. – erh86

To działa, ale uważam, że jedynym CSS, którego potrzebujesz do klasy '.ignore' jest' display: none; '. W ten sposób działa, gdy nav jest zarówno pełnej szerokości i zwinięty. – 585connor

Bootstrap 3 Scrollspy usuń aktywny stan

Odpowiedz

Powiązane problemy