在bootstrap 3缀/ scrollspy上方添加未确定的空白

Question

如果您查看此链接，则在向下滚动时将看到导航既具有附加功能又具有滚动功能（来自引导程序3）

http://codepen.io/datanity/pen/thnua

但是，如果在顶部添加空格，则缀/滚动出现在错误的位置。 例如，上面有800px的空白。

http://codepen.io/datanity/pen/haKzg

当然，现在在这里，您可以调整词缀/滚动代码，以使其在顶部高度为800px的情况下工作，但是，我的问题是我不知道顶部会有什么空间。 有时它将是2000px，有时只有300px。 另外，我没有办法知道出现在顶部的div的ID /类。 有时它将是10个div，有时是0，并且它们将始终具有不同的id /类。

有没有一种方法可以相对于其所在的容器而不是从主体顶部固定的px位置触发词缀和滚动控件？

谢谢你的帮助！ 提姆

Answer 1

向section元素添加一个ID（位于HTML页面的顶部）。 我假设这是您关心更改高度的元素。

<section id="top-section" style="height:800px;">
</section>

然后将这些行添加到您的JS文件中：

var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);

这将查询section元素的渲染高度，然后相应地修正边栏响应高度。

如果您还将拥有未知数量的部分，则应将创建这些部分的代码包装在div元素中。 例如，如果您使用PHP构建网页的区域，则应执行以下操作：

<div id="section-wrapper">
    <?php echo "Whatever code you have here" ?>
</div>

Answer 2

将其添加到js的顶部即可解决此问题。 使用这种方法，上面有多少空白或多少个div都没关系。 您的引导滚动和粘贴将始终在正确的位置！

$('#mynav').affix({
  offset: {
    top: $('#mynav').offset().top
    , bottom: function () {
      return (this.bottom = $('.bs-footer').outerHeight(true))
    }
  }
});