2016-06-12 5 views
3

Наварб работает так же, как и гладкий свиток, но я не могу изменить смещение. Мой nav 86px, но независимо от того, сколько пикселей я меняю, все равно идет на одно и то же место.bootstrap offset scrollspy не работает

$(document).ready(function() { 
    $('body').scrollspy({target: ".navbar", offset: 86}); 
    $("#myNavbar a").on('click', function(event) { 
     if (this.hash !== "") { 
      event.preventDefault(); 
      var hash = this.hash; 
      $('html, body').animate({ 
       scrollTop: $(hash).offset().top 
       }, 800, function(){ 
       window.location.hash = hash; 
      }); 
     } 
    }); 
}); 

Я добавил информацию непосредственно к тегу тела и по-прежнему без изменений. Я знаю, что jquery работает так, как будто он прокручивается, и работает крафт-навигатор.

<body data-spy="scroll" data-target=".navbar" data-offset="86"> 

ответ

3

Я не думаю, что смещение делает то, что вы думаете. I Не определяет позицию «прокрутки». Вы должны будете сделать это с дополнением.

Смещение в этом контексте означает расстояние между верхней частью экрана и разделом, в который вы прокручиваетесь. Другими словами: все, что он делает, определяет, в какой момент navbar> тег переходит в активное состояние.

заказ из: https://jsfiddle.net/wietsedevries/gu0b0dg2/1/

В этом примере я настроил data-offset="51", высота навигационной панели также 51px, поэтому, когда я прокручиваю вниз Navbar> тег изменения в активном состоянии, когда именно хиты NavBar секция.

+0

ОК спасибо, что имеет смысл. Есть ли другой способ вместо того, чтобы использовать отступы для настройки, где страница заканчивается, когда вы нажимаете на навигационную панель> тег? Прямо сейчас у меня есть контейнер div с идентификатором, например, о доме и т. Д. – JonW

+0

На странице прокручивается элемент с соответствующим идентификатором, поэтому вы можете добавить скрытый фиктивный элемент с этим идентификатором и поместить его туда, где хотите. –

+0

Если это ответили на ваш вопрос, отметьте как ответ;) –

0

Да, смещение только там, чтобы определить, когда выделена ваша навигационная ссылка. Не размещать свой экран при нажатии на ссылку. То есть прокручивающая часть зависит от вас. Вы можете использовать немного JS, чтобы сделать это вот так:

var offset = 80; 

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