0

如果您查看此链接，您会看到当您向下滚动时，导航具有词缀和滚动间谍功能（来自引导程序 3）

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

但是，如果您在顶部添加空白，则词缀/滚动条会出现在错误的位置。例如，这是顶部有 800 像素的空白区域。

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

现在当然在这里，您可以调整 affix/scrollspy 代码，这样它就可以在 800px 的高度上工作，但是，我的问题是我不知道我将在顶部有什么空间。有时它会是 2000 像素，有时只有 300 像素。此外，我无法知道出现在顶部的 div 的 id/class。有时它是 10 个 div，有时是 0 个，它们总是有不同的 id/classes。

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

谢谢你的帮助！蒂姆

4

2 回答 2

0

将此添加到 js 的顶部解决了该问题。使用这种方法，有多少空白或顶部有多少 div 并不重要。你的 bootstrap scrollspy 和词缀总是在正确的地方！

$('#mynav').affix({
  offset: {
    top: $('#mynav').offset().top
    , bottom: function () {
      return (this.bottom = $('.bs-footer').outerHeight(true))
    }
  }
});
于 2013-10-27T02:17:20.083 回答
0

将 ID 添加到 section 元素（位于 HTML 页面的顶部）。我假设这是您担心改变高度的因素。

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

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

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

这会查询部分元素的渲染高度，然后相应地修复侧边栏响应高度。

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

<div id="section-wrapper">
    <?php echo "Whatever code you have here" ?>
</div>
于 2013-10-26T22:24:27.223 回答