Twitter Bootstrap scrollspy всегда выбирает последний элемент

У меня проблема с scrollspy, воссозданная в этой скрипке: http://jsfiddle.net/jNXvG/3/

Как видно из демонстрации, плагин ScrollSpy всегда сохраняет выбранный последний пункт меню независимо от положения прокрутки. Я прочитал другие вопросы и ответы и попробовал разные комбинации offset и т.д., Но ни один из них не помог. Я не могу понять, что случилось.

Я не хочу редактировать свой шаблон, чтобы включить уродливые теги html 'data', поэтому я вызываю scrollspy() через JavaScript для активации плагина.

Следующим шагом будет удаление фиксированной высоты контента и использование 'affix' на боковой панели.

Ответ 1

Вам нужно прикрепить ScrollSpy к элементу, который будет запускать события прокрутки, а не меню, которое будет отражать позицию прокрутки:

$('#content').scrollspy();

JSFiddle

Ответ 2

У меня была такая же проблема, и для меня добавление height: 100% к элементу body было исправлением.

(как ни странно, ничто иное не заставило его работать)

Ответ 3

FYI: Чтобы получить желаемый эффект (тот же, что и на странице Документов Twitter для Bootstrap), мне нужно было установить "тело" в качестве моего целевого элемента... Я не мог заставить scrollspy работать, используя непосредственного родителя элементы, которые я хотел шпионить в качестве цели.

(Он просто автоматически выбирает мой последний элемент)

Ответ 4

В моем случае Firefox всегда выбирал последний элемент и не был

height:100%;

на теле, которое вызывало проблему (поскольку у меня не было ничего подобного).

Это был

position:absolute;

на контейнере div.

Надеюсь, что это поможет кому-то...

Ответ 5

Я исправил его, используя рост 100%, но он не работал в Firefox. Потеряв столько времени, нашел ответ на странице github. Применение высоты 100% к тегу HTML устраняет проблему как для Chrome, так и для Firefox.

https://github.com/twbs/bootstrap/issues/5007

Ответ 6

У меня была такая же проблема; удаление элемента height: 100% из элемента <body> исправлено для меня.

Ответ 7

Если какая-либо другая проблема не была решена в приведенных выше предложениях, попробуйте добавить <!DOCTYPE html> в первую строку вашей страницы. Это был простой шаг, который решил проблему для меня.

Ответ 8

У меня была аналогичная проблема, когда scroll-шпион не работал ни на чем, кроме тега body, поэтому я действительно вошел в bootstrap. js нашел раздел Scroll spy (SCROLLSPY CLASS DEFINITION) и изменил эту строку:

$element = $(element).is('body')? $(window): $(элемент)

$element = $(element).is('body')? $(window): $(window)//$(элемент)

(обратите внимание, что элемент после//является комментарием, поэтому я не забываю, что я его изменил)

И это исправило это для меня.

Ответ 9

При вызове метода scrollspy обычно указывается тег body и элемент nav.

<script>
        $(function() {
            $('body').scrollspy({ target: '#faq_sidebar' });
        });
</script>

Вышеупомянутый JavaScript эквивалентен:

<body data-spy="scroll" data-target="#faq_sidebar">

Единственная ситуация, когда вы не указываете тег body, - это если вы хотите отслеживать элемент с вложенной полосой прокрутки, как в JSFiddle выше.

Ответ 10

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

Вложенным контентом была моя проблема. Это исправило это для меня:

(1) убедитесь, что все hrefs в вашем навигаторе соответствуют соответствующему идентификатору вашего шпионажа в целевом контейнере.

(2) Если элементы в вашем контейнере, содержащиеся в контейнере содержимого, вложены, то это не сработает...

Это:

<ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- nested content -->
   <div id="navItem1">
      <div id="navItem2"></div>
   </div>    

</div>

К этому:

<ul class="nav" id="sidebar">
  <li>
     <a href="#navItem1" />
  </li>
  <li>
     <a href="#navItem2" />
  </li>
</ul>
<div id="spiedContent"> <!-- flat content -->
   <div id="navItem1"></div>    
   <div id="navItem2"></div>
</div>

Все хорошо!

Мое предположение, если вы посмотрели на код scrollspy, не просматривая первый дочерний элемент контейнера-шпиона для идентификаторов.

Ответ 11

Убедитесь, что вы не смешиваете реализации. Вам не нужно $('#content).scrollspy(), если у вас есть data-spy="scroll" data-target=".bs-docs-sidebar" в теге тела.

Ответ 12

Я думаю, что это может быть ошибкой в ScrollSpy.

У меня также была та же проблема, и когда я прошел через код, я увидел, что смещение для всех целей было одинаковым (-95px). Я проверил, где они были установлены, и он использовал функцию position(). Это возвращает позицию элемента относительно смещения родителя.

Я изменил это, чтобы вместо этого использовать функцию offset(). Эта функция возвращает позицию элемента относительно смещения страницы. Как только я это сделал, он работал отлично. Не уверен, почему это не поведение по умолчанию.

Причина, по которой функция position() не работала в моем случае, заключалась в том, что я должен был иметь пустой div, который фактически был абсолютно расположен на 95 пикселей выше верхней части контейнера. Мне нужно было это как моя цель, чтобы заголовки не были скрыты за моим заголовком, который был прикреплен к верхней части страницы.

Ответ 13

Когда я пытался выяснить эту проблему, я использовал часть того, что сказал Мехди Бенадда, и добавил position: relative; к body. Я добавил это в таблицу стилей:

body {
  position: relative;
  height: 100%;
}

Надеюсь, это поможет кому-то в будущем.