Javascript 仅当通过滚动点时才粘贴Boostrap

我试图在我的网站上实现引导粘贴功能，我只想在相邻的div开始消失后滚动侧边栏

我希望

.submenu

仅在第一个

.test div

开始从视图中滚动时才具有粘性，因此它会随着

一起滚动。test div

最初会滚动到顶部，但一旦第一个

开始出现粘性，test div

就会消失

CSS:

HTML:

标题
标题
标题
标题
标题
标题
标题
子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

子菜单将转到此处

页脚

您是否在没有车身顶部200px衬垫的情况下测试了此功能？因为这在JS计算偏移顶部时也很重要。或者简单地给它一个更高的偏移顶部。

从it中可以看出，您需要为粘贴内容的位置和宽度提供CSS。对于底部偏移，您还需要为类

添加CSS。粘贴底部

用法

通过数据属性使用粘贴插件，或手动使用自己的插件
JavaScript。在这两种情况下，都必须为
粘贴内容的位置和宽度

CSS

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

<> P>因为只有在第一个测试div离开视图后才需要边栏粘贴，所以您必须考虑第一个div的高度以及体填充顶部的“<代码>数据偏移顶部>代码>，同样的方式用于<代码>数据偏移底部<代码>考虑页脚的高度。

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

您应该为粘贴的子菜单添加css

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

.affix{
 top:0px;
}

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

.affix-bottom{
 position:absolute;
}

最好的做法是预先确定偏移量，而不是通过javascript进行设置。-只是一个建议

这是我的提琴-
正文上的填充只是为了模拟我真实页面上的额外间距，该页面的内容和边栏上方有标题之类的元素。有没有一种方法可以使用比如jQuery动态设置
数据偏移顶部
？因此，它应该看到第一个
测试div
在屏幕上的何处结束，并使用该位置作为偏移量。@Imran是的，您可以动态设置值。我已经更新了答案。很抱歉，我的描述不准确，如何更改
pos
变量，以便在第一个
.test div
的任何部分不可见时，侧边栏变粘？我尝试了
var pos=$（'.test div'）.eq（1）.offset（）-$（'.test div'）.eq（1）.height（）但这不起作用。哦，那么您需要提供第一个test-div.
$（“.test-div”）.eq（0）
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);

.affix{
 top:0px;
}

.affix-bottom{
 position:absolute;
}