如何获取Bootstrap 3缀方法的动态数据偏移值

问题描述

我想使用Bootstraps文档（），但是我想在滚动到页面后固定到页面顶部的导航栏可以具有不同的偏移值，具体取决于页面上方的内容。

I would like to use the Affix method described in Bootstraps documentation (http://getbootstrap.com/javascript/#affix), however the navbar I would like to fix to the top of the page after it scrolls to it can have different offset values depending upon the content above it.

以下是导航栏的示例：

<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</div>

如您所见， data-offset-top 当前设置为200。如果上面的内容高200像素，则效果很好，但是上面的内容是动态的，因此此导航栏上方的高度并不总是相同。我该如何动态调整 data-offset-top 的标价？

As you can see, the data-offset-top is currently set at 200. This works fine if the content above is 200px tall, but the content above is dynamic and so the height above this navbar isn't always the same. How can I make the vale for data-offset-top be dynamic?

我猜我会必须使用javascript的方式来做，但是我很确定。

I'm guessing I'll have to use the javascript way of doing it but I'm nit sure.

推荐答案

您可以使用jQuery来获取动态内容导航栏的高度。例如：

You could use jQuery to get the dynamic content height above the navbar. For example:

$('#nav').affix({
      offset: {
        top: $('header').height()
      }
});

工作演示：

在某些情况下，还必须计算offset.bottom以确定何时取消固定元素。

In some cases, offset.bottom must also be calculated to determine when to "un-affix" the element. Here's an example of affix-bottom

这篇关于如何获取Bootstrap 3缀方法的动态数据偏移值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！