Bootstrap 4.0 affix/scrollspy and main navbar and

2019-03-03 11:29发布

问题:

I've created a wordpress theme based on Bootstrap 4.0. So far so good.

The problem I'm facing is with Affix/Scrollspy. I know Affix was removed from Bootstrap 4.0 but I'm using this addon from 3.0 : https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js?ver=3.3.6

I have a main nav bar (horizontal navbar at the top) which is fixed when you scroll down 80px. This is working well.

Then there is a sidebar which uses affix to stay fixed when scrolling down 600px from the top all the way to the footer.

For some reason I can't get the ScrollSpy to work with the affixed sidebar.

Here's the setup for the part that should be "spied" on :

<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>

And now the sidebar which was created according to Bootstrap docs

<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>

And now for the javascript

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


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

What am I missing?