我试图在不使用 pxiel 数量的情况下让引导词缀顶部偏移量工作，而是在它超过某个 div 后触发它。我的词缀一旦到达底部就停止被触发，但我在正确的位置启动它时遇到了问题。
下面是我的代码，这里是一个JSFiddle。我希望在用户经过 div#content-header然后侧边栏位于页面的右上角之前不会触发侧边栏。然而，侧边栏目前仅位于顶部。
$('#sidebar-wrapper').affix({
offset: {
top: function() {
return $('#content-header').height(true)
},
bottom: function() {
return (this.bottom = $('#footer-wrapper').outerHeight(true))
}
}
})#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper.affix {
top: 30px;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>更新：
从中删除true，.height(true)因此它现在在 之后触发#content-header。然而，它只在第一次工作，一旦你到达页面底部，侧边栏似乎会跳回顶部。