{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《Bootstrap 4.0 affix/scrollspy and main navbar and》','https://www.manongdao.com/q-431398.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?