javascript - 仅当经过滚动点时 Bootstrap 附加

Question

我正在尝试在我的网站上实现 Bootstraps Affix 功能，我只想在相邻的 div 开始消失后才滚动侧边栏。

我希望 .submenu 仅在第一个 .test-div 开始滚动到 View 之外时才具有粘性，因此它会随 .test 一起滚动-div 最初位于顶部，但一旦第一个 .test-div 开始消失在视线之外，它就会变得粘稠。

jsFiddle link

CSS:

body {
    padding-top: 200px;
}
.test-div {
    min-height: 400px;
    border: 1px solid #D1D1D1;
    margin-bottom: 10px;
}
.footer {
    border: 1px solid red;
    height: 500px;
}

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-8">

            <div id="1" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="2" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="3" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="4" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="5" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="6" class="test-div">
                <h2>Header</h2>
            </div>
            <div id="7" class="test-div">
                <h2>Header</h2>
            </div>

        </div>

        <div class="col-xs-4">
            <div data-spy="affix" data-offset-top="60" data-offset-bottom="400" class="submenu">
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
              sub menu will go here<br>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 footer">Footer</div>
    </div>
</div>

Answer 1

来自docs它表示您需要为附加内容的位置和宽度提供 CSS。另外，对于底部偏移，您需要为类 .affix-bottom 添加 CSS .

Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

CSS

.affix{ top: 0px;}
.affix-bottom{ position: absolute;}

由于您希望侧边栏仅在第一个测试 div 退出 View 后才保留，因此您必须考虑第一个 div 的高度以及 data-offset-top 的 body padding-top 。对于 data-offset-bottom 也是如此考虑页脚的高度。

<div data-spy="affix" data-offset-top="600" data-offset-bottom="400">
    sub menu will go here<br/>
    sub menu will go here<br/>
    ....
</div>

更新:

您可以设置data-offset通过使用获取第二个 test-div 的顶部值来动态属性使用offset .

var pos = $('.test-div').eq(0).offset();
var pos_foot = $('.footer').height();

$('[data-spy="affix"]').attr("data-offset-top",pos.top);
$('[data-spy="affix"]').attr("data-offset-bottom",pos_foot);

Updated Fiddle