Question

如果你看看这个链接，你会看到当你向下滚动时，导航同时具有词缀和scrollspy功能（来自bootstrap 3）

但是，如果在顶部添加空格，则词缀/ scrollspy出现在错误的位置。例如，这是在顶部有800px的空白区域。

现在当然，你可以调整词缀/ scrollspy代码，这样它就可以在800px高度上工作，但是，我的问题是我不知道我将拥有什么空间。有时它将是2000px，其他时间只有300px。另外，我无法知道ontop上显示的div的id / class。有时它将是10个div，有时是0，并且它们将始终具有不同的id / classes。

是否有一种方法可以相对于它所在的容器触发词缀和scrollspy，而不是从身体顶部开始固定的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。你的bootstrap scrollspy和affix总是在正确的位置！

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

在bootstrap 3 affix / scrollspy上添加未确定的空格

2 个答案: