Как установить смещение для ScrollSpy в Bootstrap? - PullRequest
Новая
       0

Как установить смещение для ScrollSpy в Bootstrap?

94 голосов
/ 15 февраля 2012

У меня есть сайт с фиксированной панелью навигации и 3 делениями внизу в основной области содержимого.

Я пытаюсь использовать 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>

Ответы [ 10 ]

105 голосов
/ 05 августа 2012

Bootstrap использует смещение для разрешения только шпионажа, а не прокрутки. Это означает, что прокрутка до нужного места зависит от вас.

Попробуйте, у меня это работает: добавьте обработчик событий для кликов навигации. 

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

Я нашел это здесь: https://github.com/twitter/bootstrap/issues/3316

74 голосов
/ 26 сентября 2012

Хитрость, на которую намекал Тим, заключается в том, чтобы использовать преимущество заполнения. Таким образом, проблема в том, что ваш браузер всегда хочет прокрутить ваш якорь точно до вершины окна. если вы установите свой якорь там, где ваш текст фактически начинается, он будет перекрыт вашей строкой меню. Вместо этого вы устанавливаете привязку к идентификатору тега контейнера <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 позаботится о смещении навигационной панели: 

body {
    margin-top: 40px;/* make room for the nav bar */
}

/* make room for the nav bar */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
dt[id]{
    padding-top: 60px;
    margin-top: -40px;
}
9 голосов
/ 13 марта 2013

Вы можете изменить смещение scrollspy на лету с помощью этого (при условии, что вы шпионите за телом): 

offsetValue = 40;
$('body').data().scrollspy.options.offset = offsetValue;
// force scrollspy to recalculate the offsets to your targets
$('body').data().scrollspy.process();

Это также работает, если вам нужно динамически изменить значение смещения.(Мне нравится, что scrollspy переключается, когда следующий раздел находится на полпути вверх по окну, поэтому мне нужно изменить смещение при изменении размера окна.)

8 голосов
/ 29 февраля 2012

Если вы хотите смещение 10, вы бы поместили это в вашу голову: 

<script>
  $('#navbar').scrollspy({
    offset: 10
  });
</script>

Ваш тег тела будет выглядеть так: 

<body data-spy="scroll">
4 голосов
/ 16 июня 2016

С вопрос начальной загрузки # 3316 :

[Это] предназначено только для изменения расчетов прокрутки - мы не сдвигаем фактический щелчок привязки

Таким образом, установка смещения влияет только на , когда scrollspy считает страницу прокрученной до . не влияет на прокрутку при нажатии на тег привязки.

Использование фиксированной панели навигации означает, что браузер прокручивает в неправильное место. Вы можете исправить это с помощью JavaScript: 

var navOffset = $('.navbar').height();

$('.navbar li a').click(function(event) {
    var href = $(this).attr('href');

    // Don't let the browser scroll, but still update the current address
    // in the browser.
    event.preventDefault();
    window.location.hash = href;

    // Explicitly scroll to where the browser thinks the element
    // is, but apply the offset.
    $(href)[0].scrollIntoView();
    window.scrollBy(0, -navOffset);
});

Однако, чтобы scrollspy выделил правильный текущий элемент, вам все равно нужно установить смещение: 

<body class="container" data-spy="scroll" data-target=".navbar" data-offset="70">

Вот полная демонстрация JSFiddle .

В качестве альтернативы, вы можете добавить к своим тегам привязки, как предложено трюками CSS . 

a[id]:before { 
  display: block; 
  content: " ";
  // Use the browser inspector to find out the correct value here.
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}
1 голос
/ 13 мая 2013

Я добавил 40px-height .vspace элемент, удерживающий привязку перед каждым из моих h1 элементов. 

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

В CSS: 

.vspace { height: 40px;}

Работает отлично ипространство не задыхается.

1 голос
/ 29 мая 2012

Я думаю, что смещение может что-то сделать с нижней позицией секции.

Я исправил свою проблему, так же как и вашу, добавив 

  padding-top: 60px;

в объявлении для секции в bootstrap.css

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

0 голосов
/ 19 июля 2017

Просто установите: 

data-offset="200"

data-offset по умолчанию равно 50, что эквивалентно 10 пикселям, поэтому просто увеличьте data-offset и ваша проблема решена.

0 голосов
/ 09 июля 2013

Вы также можете открыть bootstap-offset.js и изменить 

$.fn.scrollspy.defaults = {
  offset: 10
}

там.

0 голосов
/ 06 июня 2013

У меня были проблемы с решениями acjohnson55 и Kurt UXD.Оба работали, чтобы щелкнуть ссылку на хеш, но смещение прокрутки было по-прежнему неверным.

Я нашел следующее решение: 

<div class="anchor-outer">
  <div id="anchor">
    <div class="anchor-inner">
      <!-- your content -->
    </div>
  </div>
</div>

И соответствующий CSS: 

body {
  padding-top:40px;
}

.anchor-outer {
  margin-top:-40px;
}

.anchor-inner {
  padding-top:40px;
}

@media (max-width: 979px) {
  body {
    padding-top:0px;
  }

  .anchor-outer {
    margin-top:0px;
  }

  .anchor-inner {
    padding-top:0px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top:0px;
  }

  .anchor-outer {
    margin-top:0px;
  }

  .anchor-inner {
    padding-top:0px;
  }
}

Вам нужно будет заменить отступы / поля 40px на высоту панели навигации и идентификатор вашего якоря.

В этой настройке я даже могу наблюдать эффект установки значения для атрибута смещения данных.Если найти большие значения для смещения данных около 100-200, это приведет к более ожидаемому поведению (scrollspy- «переключатель» произойдет, если заголовок будет примерно в середине экрана).

Я также нашелчто scrollspy очень чувствителен к ошибкам, таким как незакрытые теги div (что вполне очевидно), поэтому http://validator.w3.org/check был моим другом здесь.

На мой взгляд, scrollspy лучше всего работает с целыми разделами, содержащими идентификатор привязки,поскольку обычные элементы привязки не приводят к ожидаемым эффектам при прокрутке в обратном направлении (scrollspy- «переключатель» в конечном итоге происходит, как только вы нажимаете элемент привязки, например, ваш заголовок, но в то время вы уже прокручивали содержимое, которое ожидает пользовательпринадлежать к соответствующему заголовку).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...