У меня есть сайт с фиксированной навигационной панелью сверху и тремя блоками внизу в области основного содержимого.
Я пытаюсь использовать scrollspy из фреймворка начальной загрузки.
У меня он успешно выделяет разные заголовки в меню, когда вы прокручиваете мимо div.
У меня также есть, поэтому, когда вы нажимаете на меню, оно прокручивается до нужной части страницы. Однако смещение неверно (оно не учитывает навигационную панель, поэтому мне нужно смещение примерно на 40 пикселей)
Я вижу, что на странице Bootstrap упоминается параметр смещения, но я не уверен, как его использовать.
Я также не то, что означает, когда говорится, что вы можете использовать scrollspy $('#navbar').scrollspy()
, я не уверен, где его включить, поэтому я этого не сделал, и все, похоже, работает (кроме смещения).
Я подумал, что смещение может быть data-offset='10'
тегом body, но для меня это ничего не значит.
У меня такое чувство, что это что-то действительно очевидное, и я просто скучаю по нему. Любая помощь?
Мой код
...
<!-- note: the data-offset doesn't do anything for me -->
<body data-spy="scroll" data-offset="20">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">VIPS</a>
<ul class="nav">
<li class="active">
<a href="#trafficContainer">Traffic</a>
</li>
<li class="">
<a href="#responseContainer">Response Times</a>
</li>
<li class="">
<a href="#cpuContainer">CPU</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div id="trafficContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="responseContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="cpuContainer" class="graph" style="position: relative;">
<!-- graph goes here -->
</div>
</div>
</div>
</div>
...
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
</body>
</html>
источник
Ответы:
Bootstrap использует смещение только для разрешения шпионажа, а не прокрутки. Это означает, что прокрутка до нужного места зависит от вас.
Попробуйте, у меня это работает: добавьте обработчик событий для щелчков навигации.
Я нашел его здесь: https://github.com/twitter/bootstrap/issues/3316
источник
window.location.hash = $(this).attr('href')
эту функцию.var navOffset = $('#navbar').height();
иscrollBy(0, -navOffset);
Уловка, как намекал Тим, состоит в том, чтобы воспользоваться дополнением. Итак, проблема в том, что ваш браузер всегда хочет прокрутить ваш якорь точно до верхней части окна. если вы установите привязку там, где на самом деле начинается текст, он будет перекрыт строкой меню. Вместо этого вы устанавливаете привязку к контейнеру
<section>
или<div>
идентификатору тега, который будет автоматически использоваться навигационной панелью / навигационной панелью. Затем вы должны установить вашpadding-top
для контейнера на сумму смещение вы хотите, иmargin-top
для контейнера в противоположном изpadding-top
. Теперь блок вашего контейнера и якорь начинаются точно в верхней части страницы, но содержимое внутри начинается только под строкой меню.Если вы используете обычные якоря, вы можете сделать то же самое, используя отрицательный маржинальный верх в вашем контейнере, как указано выше, но без заполнения. Затем вы помещаете обычный
<a target="...">
якорь в качестве первого дочернего элемента контейнера. Затем вы стилизуете второй дочерний элемент с противоположным, но равнымmargin-top
, но с использованием селектора.container:first-child +
.Все это предполагает, что для вашего
<body>
тега уже установлено поле, начинающееся под вашим заголовком, что является нормой (в противном случае страница сразу же отобразилась бы с закрытым текстом).Вот пример этого в действии. Все на вашей странице с идентификатором можно связать, добавив # the-elements-id в конец URL-адреса. Если вы сделаете все свои h-теги ad dt-тегами с возможностью связывания идентификаторов ( как это делает github ), с помощью какого-то скрипта, который вставляет небольшую ссылку слева от них ; добавление следующего в ваш CSS позаботится о смещении навигационной панели за вас:
источник
Вы можете изменить смещение scrollspy на лету с помощью этого (при условии, что вы следите за телом):
Это также работает, если вам нужно динамически изменять значение смещения. (Мне нравится, когда scrollspy переключается, когда следующий раздел находится примерно на полпути к окну, поэтому мне нужно изменить смещение во время изменения размера окна.)
источник
$('body').data()['bs.scrollspy'].options.offset
. Полезно для запуска scrollspy при загрузке страницы с помощьюwindow.scrollBy(X,Y)
Если вам нужно смещение 10, вы должны вставить это в свою голову:
Тег вашего тела будет выглядеть так:
источник
Из проблемы начальной загрузки № 3316 :
Таким образом, установка смещения влияет только на то, где scrollspy думает, что страница прокручивается . Это не влияет на прокрутку при нажатии тега привязки.
Использование фиксированной панели навигации означает, что браузер прокручивается не в то место. Вы можете исправить это с помощью JavaScript:
Однако, чтобы убедиться, что scrollspy подсвечивает правильный текущий элемент, вам все равно нужно установить смещение:
Вот полная демонстрация JSFiddle .
В качестве альтернативы вы можете дополнить свои теги привязки, как это предлагается трюками CSS .
источник
Я думаю, что это смещение может что-то сделать с нижним положением раздела.
Я исправил свою проблему - такую же, как и вашу, - добавив
в объявлении раздела в bootstrap.css
Надеюсь, это поможет!
источник
Я добавил элемент высотой 40 пикселей
.vspace
с привязкой перед каждым из моихh1
элементов.В CSS:
Он отлично работает, и места не забивает.
источник
Bootstrap 4 (обновление 2019)
Реализация: фиксированная навигация, прокрутка и плавная прокрутка
Это решение от @ wilfred-hughes выше, оно точно устраняет проблему перекрытия с фиксированной навигационной панелью Bootstrap, используя CSS ':: before' для добавления неотображаемого блока перед каждым тегом раздела. Преимущество: вы не получаете ненужных отступов между разделами. Например, раздел 3 можно расположить вертикально вплотную к разделу 2, и он все равно будет прокручиваться до точного правильного положения вверху раздела 3.
Боковое примечание: установка смещения scrollspy в теге скрипта не привела к тому, что ничего не произошло ($ ('# navbar'). Scrollspy ({offset: 105});), и попытки отрегулировать смещение в блоке анимации по-прежнему приводили к рассогласованию пост- анимация.
index.html
позже в index.html ...
style.css:
Предоставлено: @ wilfred-hughes выше и исходный источник от пользователя @mnot на https://github.com/twbs/bootstrap/issues/1768.
источник
У меня были проблемы с решениями acjohnson55 и Kurt UXD. Оба работали для нажатия ссылки на хеш, но смещение scrollspy по-прежнему было неправильным.
Я пришел к следующему решению:
И соответствующий CSS:
Вам нужно будет заменить отступ / поле 40 пикселей на высоту вашей панели навигации и идентификатор вашего якоря.
В этой настройке я даже могу наблюдать эффект установки значения для атрибута data-offset. Если найти большие значения для data-offset около 100-200, это приведет к более ожидаемому поведению (scrollspy- "switch" произойдет, если заголовок будет примерно посередине экрана).
Я также обнаружил, что scrollspy очень чувствителен к ошибкам, таким как незакрытые теги div (что вполне очевидно), поэтому http://validator.w3.org/check был моим другом.
На мой взгляд, scrollspy лучше всего работает с целыми разделами, содержащими идентификатор привязки, поскольку обычные элементы привязки не приводят к ожидаемым эффектам при прокрутке назад (scrollspy- "switch" в конечном итоге происходит, как только вы нажимаете элемент привязки, например, ваш заголовок, но в это время вы уже прокручивали контент, который, как ожидает пользователь, должен принадлежать соответствующему заголовку).
источник
Если вы наткнулись на этот вопрос (как и я) через Google и все еще ищете способ динамического изменения смещения scrollspy. Сейчас я прикрепляю ссылку на решение, которое сработало для меня.
Взгляните на этот пост, который я сделал в другой ветке . Он содержит отрывок о том, как вы можете программно изменить значение смещения и динамически реагировать на изменения (например, если панель навигации изменяется в размере).
Вам не нужно возиться с исправлениями CSS, а лучше установить необходимое смещение в зависимости от определенных событий.
источник
Вы также можете открывать
bootstap-offset.js
и изменятьтам.
источник
Просто установите:
data-offset
по умолчанию "50", что эквивалентно 10px, так что просто увеличьте,data-offset
и ваша проблема будет решена.источник