Question

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

我希望.submenu只有在第一个.test-div开始向外滚动时才会变粘，所以它最初会以.test-div滚动到顶部但是第一个.test-div滚动如果它变粘，它就会开始消失。

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。

<强>用法

通过数据属性使用affix插件或使用您自己的手动插件   JavaScript的。在这两种情况下，您都必须提供CSS   贴图内容的定位和宽度。

<强> CSS

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

由于您希望仅在第一个test-div离开视图后侧边栏才会粘住，您必须考虑第一个div的高度以及data-offset-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>

更新

您可以使用offset获取第二个data-offset的最高值，动态设置test-div属性。

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

Answer 2

您应该为附加的子菜单添加css。

这将在到达顶部偏移后粘贴时应用。

.affix{
 top:0px;
}

在达到底部偏移后将应用以下内容。

.affix-bottom{
 position:absolute;
}

最佳做法是事先确定偏移量，而不是通过javascript设置。 - 只是一个建议。

这是我的小提琴 - http://jsfiddle.net/clickdilip/epnfzo4s/7/

Answer 3

你是否在没有身体顶部200px填充的情况下测试了这个？因为当JS计算偏移顶部时，这也很重要。或者只是给它一个更高的偏移顶部。

Bootstrap仅在过去滚动点时附加

3 个答案: