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

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

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

Две проблемы.

Элементы боковой панели не выделяются при прокрутке страницы по каждой секции.
Когда вы нажимаете на элемент боковой панели, он переходит к соответствующему якорю, но половина содержимого не отображается. Изменение значения data-offset не имеет эффекта.

Что я делаю неправильно?

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group navbar" id="sidebar">
                <ul class="nav" id="mynav">
                    <li><a href="#c1" class="list-group-item">
                          Content 1
                        </a>
                    </li>
                    <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
                        </a>
                    </li>
                    <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
                        </a>
                    </li>
                    <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
                        </a>
                    </li>
                    <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9" id="mycontent" data-spy="scroll" data-target="#sidebar" data-offset="0">
                <h2 id="c1" class="">Content 1</h2>
At Bootply we attempt to build simple Bootstrap templates that utilize...
            <hr class="col-md-12">
                    <h2 id="c2" class="">Content 2</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c3" class="">Content 3</h2>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto...
                <hr class="col-md-12">
                    <h2 id="c4" class="">Content 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
                    <h2 id="c5" class="">Content 5</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
        </div>
    </div>
</div>

Ответ 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 - я надеюсь, что это полезно и для других!