Bootstrap 3 - Scrollspy с боковой панелью - Отличная библиотека

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

Ниже мой код, и это также здесь: 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>

источник

2013-09-20 mccannf

Возможный дубликат http://stackoverflow.com/questions/18799688/bootstrap-affix-navbar-for-single-page-with-scrollspy-and-page-anchors/18834770 –

@BassJobsen - посмотрим. Но он будет решать только проблему № 2, упомянутую выше. – mccannf

Да, но пример кода также имеет «решение» для # 1. Btw для # 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 элемента.

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

ПРИМЕЧАНИЕ Документация по Бутстрапу будет иметь одинаковую проблему. Они зафиксировали это, добавив дополнительный пробел между тем, по умолчанию, см:

enter image description here

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

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

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

источник

2013-09-20 22:14:29

Отлично, спасибо. – mccannf

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

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

источник

2013-10-10 05:12:59 user2865538

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

ответ

Смежные вопросы