Twitter Bootstrap scrollspy всегда выбирает последний элемент
Мне удалось заставить это работать, изменив метод PHP, который я использовал, вот мой PHP:
<?php
require_once "./source/includes/data.php";
header('Content-type: application/json');
$request = $_REQUEST['username'];
$query = mysql_query("SELECT * FROM mmh_user_info WHERE username ='$username'");
$result = mysql_num_rows($query);
if ($result == 0){
$valid = 'true';}
else{
$valid = 'false';
}
echo $valid;
?>
Спасибо всем здесь за вашу помощь:)
13 ответов
Вам необходимо прикрепить ScrollSpy к элементу, который будет вызывать события прокрутки, а не к меню, которое будет отражать позицию прокрутки:
$('#content').scrollspy();
JSFiddle
У меня была точно такая же проблема, и для меня добавление height: 100% к элементу тела было исправлением.
(строго ничто иное, казалось, не заставляло его работать)
К вашему сведению: чтобы получить желаемый эффект (такой же, как на странице документации по Bootstrap в Твиттере), мне нужно было указать «тело» в качестве целевого элемента ... Я не мог заставить работать scrollspy с использованием непосредственного родителя элементы, которые я хотел шпионить в качестве цели.
(Он просто всегда автоматически выбирал мой последний элемент)
В моем случае Firefox всегда выбирал последний элемент, и это НЕ было
height:100%;
на теле, которое вызывало проблему (поскольку у меня не было ничего подобного).
Это был
position:absolute;
на контейнерном дивизионе.
Надеюсь, это поможет кому-то там ...
Я исправил это, используя рост 100%, но он не работал в Firefox. Потратив столько времени, нашел ответ на странице github. Применение высоты 100% к тегу HTML устраняет проблему как в Chrome, так и в Firefox.
У меня была такая же проблема; удаление height: 100% из элемента <body> исправило это для меня.
Если чья-либо проблема не была решена с помощью приведенных выше предложений, попробуйте добавить <!DOCTYPE html> в первую строку вашей страницы. Это был простой шаг, который решил проблему для меня.
У меня была похожая проблема, когда шпион прокрутки не работал ни на чем, кроме тега body, поэтому я фактически вошел в начальную загрузку js, нашел раздел Scroll spy (SCROLLSPY CLASS DEFINITION) и изменил эту строку:
, $ element = $ (element) .is ('body')? $ (окно): $ (элемент)
на это:
, $ element = $ (element) .is ('body')? $ (window): $ (window) // $ (element)
(обратите внимание, что элемент после // является комментарием, поэтому я не забываю, что изменил его)
И это исправило это для меня.
При вызове метода scrollspy вы обычно указываете тег body и элемент nav.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
JavaScript выше эквивалентен:
<body data-spy="scroll" data-target="#faq_sidebar">
Единственная ситуация, когда вы не указываете тег body, это если вы хотите отслеживать элемент с помощью вложенной полосы прокрутки, как в JSFiddle выше .
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, он не смотрит мимо первого потомка шпионского контейнера для идентификаторов.
Убедитесь, что вы не смешиваете реализации. Вам не нужно $('#content).scrollspy(), если у вас есть data-spy="scroll" data-target=".bs-docs-sidebar" на вашем теге тела.
Я думаю, что это может быть ошибкой в ScrollSpy.
У меня тоже была такая же проблема, и когда я прошел по коду, я увидел, что смещение для всех целей было одинаковым (-95px). Я проверил, где они были установлены, и использовал функцию position (). Это возвращает позицию элемента относительно смещения родителя.
Я изменил это, чтобы использовать функцию offset (). Эта функция возвращает позицию элемента относительно смещения страницы. Как только я это сделал, это сработало идеально. Не уверен, почему это не стандартное поведение.
Причина, по которой функция position () не работала в моем случае, заключалась в том, что у меня должен был быть пустой div, который на самом деле был абсолютно позиционирован на 95px над верхом его контейнера. Мне нужно было это как цель, чтобы заголовки не были скрыты за моим заголовком, который был зафиксирован в верхней части страницы.
Когда я пытался выяснить эту проблему, я использовал кое-что из того, что сказал Мехди Бенадда, и добавил position: relative; в body. Я добавил это в таблицу стилей:
body {
position: relative;
height: 100%;
}
Надеюсь, это поможет кому-то в будущем.