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

Question

我想使用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.如果上面的内容高200像素,这可以正常工作,但上面的内容是动态的,因此此导航栏上方的高度并不总是相同.我怎样才能使这个价值data-offset-top变得充满活力？

我猜我将不得不使用javascript的方式来做这件事,但我很肯定.

Answer 1

你可以使用jQuery来获得高于的动态内容高度navbar.例如:

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

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

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

Answer 2

我对它的工作方式感到非常沮丧,每次做一些自定义计算并建立偏离所需词缀上方元素高度的偏移量.

这里的贴子是最好的.

普通的boostrap附件不会将项目自然偏移顶部位置考虑在内,您必须手动将其作为属性传递.这样可以解决这个问题,并在窗口调整大小时考虑偏移顶部的变化.

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
  $(this).affix({
    offset: {
      top: $(this).offset().top,
    }
  })
})
$(window).on("resize", function(){
  $attribute.each(function(){
    $(this).data('bs.affix').options.offset.top = $(this).offset().top
  })
})

我还在代码审查中发布了这个.

不要忘记将data-smart-affix属性添加到词缀元素

试试这个示例代码:https://jsfiddle.net/NabiKAZ/qyrauogw/
(在此示例中,红色部分的高度在窗口的差异宽度中可能是100px或200px或300px,因此data-offset-top在滚动时需要进行差异.)