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

前端之家收集整理的这篇文章主要介绍了jquery – 如何获取Bootstrap 3 affix方法的动态数据偏移值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用Bootstraps文档( http://getbootstrap.com/javascript/#affix)中描述的Affix方法,但是我想在页面顶部修复的导航栏滚动到它后,可以根据上面的内容具有不同的偏移量值。

以下是导航栏的示例:

<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.如果上面的内容高达200px,但上述内容是动态的,因此高于此导航栏的高度并不总是相同的。如何使数据偏移顶部的值为动态?

我猜想我将不得不使用JavaScript的方式做,但我不能肯定。

解决方法

您可以使用jQuery获取导航栏上方的动态内容高度。例如:
$('#nav').affix({
      offset: {
        top: $('header').height()
      }
});

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

在某些情况下,还必须计算offset.bottom,以确定何时“拆分”元素。 Here’s an example of affix-bottom

原文链接:https://www.f2er.com/jquery/182744.html

猜你在找的jQuery相关文章