我试图让Bootstrap的scrollspy在响应式网站上可靠地工作,其中顶部导航栏的高度根据媒体/浏览器的宽度而变化.因此,不是硬编码data-offset属性的偏移量,而是通过Javascript初始化动态设置它,如下所示:

$('body').scrollspy({ offset: 70, target: '#nav' });

对于宽布局(即Bootstrap -lg),它可以正常工作,但对于较窄的布局,似乎存在"累积"偏移.换句话说,它适用于第一部分,但随后需要增加像素来激活以下部分(例如,下一个为90px,第三部分为110px等).

我尝试直接操作scrollspy对象,如下面的答案中所述: 如何在Bootstrap中设置ScrollSpy的偏移量？但无济于事.

有人可以推荐一种在响应式网站中实现scrollspy的规范方法,其中偏移量根据媒体宽度而变化吗？

附加信息:

我刚刚在两个场景中分析了scrollspy对象,结果发现当通过data-属性而不是通过JS 初始化时,偏移列表是不同的.看起来当我通过JS初始化它时,偏移数组会在一些BS响应调整发生之前填充,因此高度不同.在所有响应式内容运行后,如何触发scrollspy的初始化？BS调整布局后是否有钩子/回调？JS是否参与或者是由CSS处理的所有响应式内容？

我有一个Bootstrap 3.0导航栏,它总是在页面顶部可见,但这可以代表该position属性的任何内容fixed.

<nav class="navbar navbar-default navbar-fixed-top" >

因为修复它会将其从文档流中取出,所以我需要在body元素中添加一些填充,以便在首次显示页面时不隐藏内容

body {
    padding-top: 70px;
}

问题是,当我单击一个菜单项导航到一个部分时,就像#About那时该部分的顶部被切断一样.

的jsfiddle

问:有没有办法添加填充,以便在导航到导航时可以看到完整项目？