Bootstrap 4.0 аффикс / scrollspy и основные навигационные панели и sidenav - PullRequest
Новая
       46

Bootstrap 4.0 аффикс / scrollspy и основные навигационные панели и sidenav

0 голосов
/ 02 октября 2018

Я создал тему WordPress на основе Bootstrap 4.0.Пока все хорошо.

Проблема, с которой я сталкиваюсь, связана с Affix / Scrollspy.Я знаю, что Affix был удален из Bootstrap 4.0, но я использую это дополнение из 3.0: https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js?ver=3.3.6

У меня есть основная навигационная панель (горизонтальная навигационная панель вверху), которая фиксируется при прокрутке вниз на 80 пикселей.Это работает хорошо.

Затем есть боковая панель, которая использует аффикс для фиксации при прокрутке вниз на 600 пикселей сверху вниз до нижнего колонтитула.

По какой-то причине я не могу заставить ScrollSpy работать сприкрепленная боковая панель.

Вот настройки для части, которая должна быть «подсмотрена»: 

<body id="ts-theme" data-spy="scroll" data-target="#sidenav-timeline" data-offset="0">
    <div class="timeline">
        <h2 id="item1">Item 1</h2>
        (... content)
        <h2 id="item2">Item 2</h2>
        (... content)
        <h2 id="item3">Item 3</h2>
        (... content)
    </div>
</body>

А теперь боковая панель, которая была создана в соответствии с документацией Bootstrap 

<div class="col-xs-12 col-sm-12 col-md-3 ">
    <div id="sidenav-timeline" class="list-group scrollspy" data-spy="affix" data-offset-top="600" data-offset-bottom="800">
          <a class="list-group-item list-group-item-action" href="#item1">'Item 1</a>
          <a class="list-group-item list-group-item-action" href="#item2">Item 2</a>
          <a class="list-group-item list-group-item-action" href="#item3">Item 3</a>
    </div>
</div>

А теперь для javascript 

$('[data-spy="affix"]').on('affixed.bs.affix', function () {
        $(".affix").css("width",$(".affix").parent().css("width").replace('px','') - 1);
})


$('body').scrollspy({ target: '#sidenav-timeline' })

Что мне не хватает?

...