ffix / scrollspy do @Bootstrap 4.0 e barra de navegação principal e sidenav

Question

Oct 02, 2018, 01:56 AM

ffix / scrollspy do @Bootstrap 4.0 e barra de navegação principal e sidenav

Eu criei um tema wordpress baseado no Bootstrap 4.0. Por enquanto, tudo bem

O problema que estou enfrentando é o Affix / Scrollspy. Eu sei que o Affix foi removido do Bootstrap 4.0, mas estou usando este complemento do 3.0:https: //rawgit.com/bassjobsen/affix/master/assets/js/affix.js? ver = 3.3.6

Tenho uma barra de navegação principal (barra de navegação horizontal na parte superior) que é corrigida quando você rola 80px para baixo. Isso está funcionando bem.

Então, existe uma barra lateral que usa o afixo para permanecer fixa ao rolar 600px da parte superior até o rodap

Por alguma razão, não consigo fazer com que o ScrollSpy funcione com a barra lateral afixad

Aqui está a configuração da parte que deve ser "espionada":

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

E agora a barra lateral que foi criada de acordo com os documentos do 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>

E agora para o javascript

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


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

O que estou perdendo