毕竟你的问题似乎并不重复。
你可以尝试这样的事情：http://bootply.com/82265 http://bootply.com/82265
当您单击子导航中的链接时，内容将隐藏在导航栏后面。我将您的内容项目包装在一个额外的 div 中。通过这样做，我可以为其添加一个填充顶部。填充使 h2 可见：
var clicked = false;
$('#mynav li a').click(
function(){
$('#mycontent > div > h2').css('padding-top',0);
$($( this ).attr('href') + ' > h2').css('padding-top','50px');
clicked = true;
}
);
$('body').on('activate.bs.scrollspy', function () {
if(!clicked)$('#mycontent > div > h2').css('padding-top',0);
clicked = false;
})
我发现的问题是撤消顶部填充的方法。我无法使用滚动事件，因为添加填充后缀会触发滚动事件。撤消“activate.bs.scrollspy”似乎有效。
在 bootply 中我添加了滚动间谍$('body').scrollspy({ target: '#sidebar', offset:80 });你可以用<body data-spy="scroll" data-target="#sidebar">还。我不确定滚动间谍偏移量的正确值是多少。 70 似乎还可以。
请注意，我还有最后一个内容项的最小高度，否则您无法滚动最后 2 个项目。
我认为以上更多的是某种概念证明，而不是真正的答案。
NOTEBootstrap的文档也会有同样的问题。他们通过默认在主题之间添加额外的空白来修复此问题，请参阅：
额外的空白将添加到 docs.css 中：
h1[id] {
margin-top: -45px;
padding-top: 80px;
}
也可以看看：https://github.com/twbs/bootstrap/issues/10670 https://github.com/twbs/bootstrap/issues/10670
