смещение начальной загрузки scrollspy не работает

Панель навигации работает так же, как и плавная прокрутка, но я не могу изменить смещение. Моя навигация составляет 86 пикселей, но независимо от того, сколько пикселей я меняю, он все равно остается в том же месте.

$(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">

twitter-bootstrap offset scrollspy
person JonW    schedule 12.06.2016    source источник

Ответы (3)


arrow_upward
14
arrow_downward

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

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

person Wietse de Vries    schedule 12.06.2016
comment
Хорошо, спасибо, это имеет смысл. Есть ли другой способ, вместо использования отступов, чтобы отрегулировать конец страницы, когда вы нажимаете на панель навигации ›тег? Прямо сейчас у меня есть контейнер div с идентификатором, например, home about и т. Д. - person JonW; 12.06.2016
comment
Страница прокручивается до элемента с соответствующим идентификатором, поэтому вы можете добавить скрытый фиктивный элемент с этим идентификатором и разместить его там, где вы хотите. - person Wietse de Vries; 12.06.2016
comment
Если это ответило на ваш вопрос, отметьте, пожалуйста, ответ;) - person Wietse de Vries; 12.06.2016
comment
Спасибо что ответили на мой вопрос - person JonW; 13.06.2016
comment
@ wietse-de-vries ссылка jsfiddle больше не работает - person Hbirjand; 02.09.2020

arrow_upward
3
arrow_downward

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

var offset = 80;

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

arrow_upward
0
arrow_downward

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

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

var offset = 86;

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

Нашел здесь:

https://github.com/twitter/bootstrap/issues/3316

person Arham Chowdhury    schedule 03.04.2020