Bootstrap Scrollspy с несколькими Navbars

Question

Here is a fiddle.

Из-за описанной проблемы in this question about creating a responsive nav menu, мне нужно иметь два идентичных навигационных элемента, один из которых отображается для небольших экранов, а другой для больших.

Однако я бы хотел, чтобы scrollspy отслеживал и применял классы .active одновременно. Для простоты, позволяет сказать, что мы имеем два одинаковых ЧСА, как этот:

<div class="scrollspy navbar"> 
    <nav class="nav"> 
     <li><a href="#option1">Option 1</a></li> 
     <li><a href="#option2">Option 2</a></li> 
     <li><a href="#option3">Option 3</a></li> 
     <li><a href="#option4">Option 4</a></li> 
     <li><a href="#option5">Option 5</a></li> 
    </nav> 
</div> 

И тогда содержание:

<div class="content"> 
    <section id="option1">1</section> 
    <section id="option2">2</section> 
    <section id="option3">3</section> 
    <section id="option4">4</section> 
    <section id="option5">5</section> 
</div> 

А потом позвонить на scrollspy:

$(".wrapper").scrollspy({ target: ".scrollspy" }); 

Вы будете см. в файле fiddle, что активный класс перепутался и мерцает вперед и назад на обоих навигационных устройствах. Однако, если вы удаляете класс scrollspy с одного из навигаторов, другой работает отлично. Это исправление?

Answer 1

Вот исправление моего друга. Это немного глоток, поэтому, если у кого-то есть более простые исправления, пожалуйста, продолжайте. В то же время это будет исправлено.

$(document).ready(function() { 
    $(".wrapper").scrollspy({ target: ".scrollspy" }); 

    var scollSpy2ActiveLI = ""; 

    $('.wrapper').on('activate.bs.scrollspy', function() { 
     if (scollSpy2ActiveLI != "") { 
      scollSpy2ActiveLI.removeClass('active');    
     }   
     var activeTab = $('.scrollspy li.active a').attr('href'); 
     scollSpy2ActiveLI = $('.scrollspy2 li a[href="' + activeTab + '"]').parent(); 
     scollSpy2ActiveLI.addClass('active'); 
    }) 

    $('.wrapper').trigger('activate.bs.scrollspy'); 
}); 

Уведомление Я использую .scrollspy2 для вашего второго навигатора.

Вот скрипка: http://jsfiddle.net/jofrysutanto/MUpz5/1/

Answer 2

Это решение не работает для меня, как у меня было 2 ЧСА, которые не были идентичны и не имеют те же якорные ссылки внутри. (Активная ссылка на .scrollspy1 не обязательно имела соответствующий близнеца в .scrollspy2)

Однако, простой:

$(".wrapper").scrollspy({ target: ".scrollspy, .scrollspy2" }); 

был достаточно, чтобы фиксирует проблему мерцающей.

Answer 3

Если поставить пустую цель, все Navs работы: https://stackoverflow.com/a/23937735

просто проверял сам. Удивительное решение.

Answer 4

использовать идентификатор вместо классов.

$(".wrapper").scrollspy({ target: "#scrollspy" });