Bootstrap 3 Scrollspy удалить активное состояние

У меня есть сайт, использующий Bootstrap с scrollspy и фиксированным заголовком. У меня он работает нормально, но возникла проблема с scrollspy. На странице есть пара разделов, которые не являются частью основной навигации. Когда вы находитесь в этих разделах, остается самая последняя «активная» ссылка. Проще всего продемонстрировать проблему на скрипке:

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

В основном я хочу, чтобы активное состояние отображалось только тогда, когда на самом деле отображается целевой элемент из панели навигации. Любые идеи? Заранее спасибо!


jquery twitter-bootstrap scrollspy
person erh86    schedule 07.04.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

То же самое случилось со мной, это то, что я сделал.
Я не знаю, лучший ли это способ сделать это, но он работает.
Вот код в вашей скрипке: http://jsfiddle.net/ZGsPm/1/

Вы добавляете дополнительные элементы списка туда, где находятся ваши игнорируемые разделы, и добавляете им класс («игнорировать» в примере) и идентификатор.

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

Затем вы добавляете соответствующий идентификатор в эти разделы, чтобы вы могли ссылаться на них из элемента списка.

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

И, наконец, в Javascript (после того, как вы вызвали функцию scrollspy):

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

Надеюсь это поможет!

person Javi    schedule 31.07.2014
comment
Спасибо! Это определенно работает - умный обходной путь. Эту функцию было бы неплохо реализовать в Scrollspy - в идеале без необходимости добавлять дополнительные элементы списка. - person erh86; 07.08.2014
comment
Это работает, но я считаю, что единственный CSS, который вам нужен для класса .ignore, - это display:none;. Таким образом, это работает, когда навигация одновременно развернута на всю ширину и свернута. - person conbask; 25.01.2017