我想使用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() } });
在某些情况下,还必须计算offset.bottom,以确定何时“拆分”元素。 Here’s an example of affix-bottom