Question

我已经基于Bootstrap 4.0创建了一个wordpress主题。到目前为止一切顺利。

我面临的问题是Affix / Scrollspy。我知道Affix已从Bootstrap 4.0中删除，但我正在从3.0使用此插件：https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js?ver=3.3.6

我有一个主要的导航栏（顶部为水平导航栏），当您向下滚动80px时，它是固定的。这运作良好。

然后有一个侧边栏，当从顶部一直向下滚动到页脚向下滚动600px时，它使用词缀保持固定。

由于某种原因，我无法使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' })

我想念什么？

Bootstrap 4.0词缀/滚动和主导航栏和Sidenav

0 个答案: