如何获取 Bootstrap 3 词缀方法的动态数据偏移值 [英] How to get dynamic data-offset values for Bootstrap 3 affix method

问题描述

我想使用 Bootstrap 文档中描述的 Affix 方法(http://getbootstrap.com/javascript/#affix)，但是我想在滚动到页面顶部后固定到页面顶部的导航栏可以具有不同的偏移值，具体取决于其上方的内容.

以下是导航栏的示例:

<ul class="nav navbar-nav"><li class="active"><a href="#">Link</a></li><li><a href="#">链接 1</a></li><li><a href="#">链接 2</a></li>

如您所见，data-offset-top 当前设置为 200.如果上面的内容高度为 200 像素，这可以正常工作，但上面的内容是动态的，因此上面的高度导航栏并不总是相同的.如何使 data-offset-top 的值成为动态的?

我猜我将不得不使用 javascript 的方式来做这件事，但我不确定.

解决方案

您可以使用 jQuery 获取 navbar 上方的动态内容高度.例如:

$('#nav').词缀({抵消: {顶部:$('header').height()}});

工作演示:http://bootply.com/69848

在某些情况下，还必须计算 offset.bottom 以确定何时取消附加"元素.以下是词缀底部的示例

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.

Here's an example of the navbar:

<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>

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?

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

解决方案

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

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

Working demo: http://bootply.com/69848

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 词缀方法的动态数据偏移值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！