Bootstrap 3 - Scrollspy с боковой панелью

Я использую Bootstrap 3. Я хочу воссоздать ту же функциональность, что и боковая панель в документации на сайте Bootstrap.

Ниже мой код, и он также находится здесь: http://bootply.com/82119

Ответы

Ответ 1

Ваш вопрос, похоже, не повторяется в конце концов. Вы можете попробовать что-то вроде этого: http://bootply.com/82265

Когда вы нажимаете ссылку в своем субнавте, содержимое будет скрываться за навигационной панелью. Я завернул ваши элементы контента в дополнительный div. Сделав это, я мог бы добавить к нему верхнюю часть. Прокладка делает видимым h2:

var clicked = false;
$('#mynav li a').click(
function(){
    $('#mycontent > div > h2').css('padding-top',0);
    $($( this ).attr('href') + ' > h2').css('padding-top','50px');
    clicked = true;
    }
);  

$('body').on('activate.bs.scrollspy', function () {
   if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
  clicked = false;
})

Проблема, которую я нашел, - это способ отменить верхнюю часть. Я не мог использовать событие прокрутки, потому что аффикс запускает событие прокрутки после добавления дополнения. Отменить на 'activate.bs.scrollspy', похоже, работает.

В bootply я добавляю scrollspy с помощью $('body').scrollspy({ target: '#sidebar', offset:80 });, вы также можете использовать <body data-spy="scroll" data-target="#sidebar">. Я не уверен, что будет правильным значением смещения scrollspy. Кажется, что-то вроде работы.

Обратите внимание, что я также мини-высота для вашего последнего элемента контента, иначе вы не сможете прокрутить последние 2 элемента.

Я думаю, что вышеизложенное будет скорее своего рода доказательством концепции, а реальным ответом.

ПРИМЕЧАНИЕ У документации Bootstrap будет такая же проблема. Они исправили это, добавив дополнительное пустое пространство между темами по умолчанию, см.

Дополнительное белое пространство будет добавлено в docs.css:

h1[id] {
    margin-top: -45px;
    padding-top: 80px;
}

Смотрите также: https://github.com/twbs/bootstrap/issues/10670

Ответ 2

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

        // figure out a nice offset from the top of the page
        var scrollTopOffset = $('#main-nav-banner').outerHeight() + 50;
        // catch clicks on sidebar navigation links and handle them
        $('.bs-sidebar li a').on('click', function(evt){
            // stop the default browser behaviour for the click 
            // on the sidebar navigation link
            evt.preventDefault();
            // get a handle on the target element of the clicked link
            var $target = $($(this).attr('href'));
            // manually scroll the window vertically to the correct
            // offset to nicely display the target element at the top
            $(window).scrollTop($target.offset().top-(scrollTopOffset));
        });

Переменная scrollTopOffset определяет, насколько близко к верхней части элемента прокручивается - вам, вероятно, потребуется настроить вычисление значения в зависимости от макета страницы. В приведенном выше примере я использовал высоту основного навигационного баннера в верхней части страницы и добавил 50 пикселей, потому что это "выглядело хорошо".

Помимо добавления дополнительного фрагмента выше, вам не нужно изменять свой HTML-код или изменять способ инициализации функции scrollspy.

Для меня это работает довольно аккуратно под Bootstrap v3.0.0 - я надеюсь, что это полезно и для других!