Question

向下滚动80像素时，主导航栏（水平）固定不变。

然后，我在页面的侧面有一个辅助导航栏，当从顶部一直向下滚动到页脚时，使用词缀保持固定。使用此插件https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js?ver=3.3.6，我可以在bootstrap 4.1页面上创建辅助sidenav。

但是我无法让ScrollSpy与所说的sidenav一起使用

这是我当前的设置

<body id="ts-theme" data-spy="scroll" data-target="#sidenav-timeline" data-offset="50">
    <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.1：使用scrollspy添加附加的辅助侧边栏导航

0 个答案: