在引导程序 3 词缀/滚动件上方添加不确定的空格

Adding undetermined white space above a bootstrap 3 affix/scrollspy

本文关键字：添加 不确定 空格 方添加 引导程序 词缀 滚动      更新时间：2023-09-26

如果你查看这个链接，你会看到当你向下滚动时，导航同时具有附加和滚动间谍功能（来自引导程序3）

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

但是，如果在顶部添加空格，词缀/滚动间谍会出现在错误的位置。 例如，这是顶部有 800px 的空白。

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

现在当然在这里，您可以调整词缀/滚动间谍代码，以便它与顶部的 800px 高度一起工作，但是，我的问题是我不知道顶部会有什么空间。 有时是 2000 像素，有时只有 300 像素。 此外，我无法知道出现在顶部的div 的 id/类。 有时是 10 个div，有时是 0，它们总是有不同的 id/类。

有没有办法相对于它所在的容器触发附加和滚动间谍，而不是从身体顶部的固定 px 位置

？

感谢您的任何帮助！提姆

将其

添加到JS的顶部解决了这个问题。 使用这种方法，顶部有多少空白或多少div并不重要。 您的引导滚动间谍和词缀将始终在正确的位置！

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

将 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>
相关文章：