在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))
    }
  }
});