我已经使用bootstrap设置了一个页面. (
http://ethnoma.org/about.html)我有一个附加的侧边栏导航(这很好用).我也在这个导航上使用bootstrap scrollspy,导航中的所有链接都在同一页面内(使用ancors).一切都工作正常(即使添加了平滑滚动插件).在将所有内容添加到页面(我放在< head>中)后,我只需调用此脚本强制Scrollspy刷新.
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
然后我的客户要求我将图像添加到页面.我这样做是使用bootstrap标记和css类,如下所示：
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
这使得父“a”标签向右浮动(在这种情况下)并使img成为块元素.
问题是这些浮动图像使页面比原来更长.然而,Scrollspy仍然在同一个地方切换活动链接.这会导致scrollspy激活页面下方内容的链接,而不是您当前的内容.
在计算ancors链接到的ID的位置时,我不知道如何强制Scrollspy将浮动图像考虑在内.你们中的任何人都知道如何解决这个问题.您可以在以下页面http://ethnoma.org/about.html中看到有效的问题
解决方法
我自己刚刚遇到过这个问题,所以我想我会提供一些解释和一个可能的解决方案,以防其他人发现自己处于这种绑定状态.
首先,scrollspy工作正常.在计算页面上各种元素的偏移量时,图像尚未加载,因此它们的有效高度为0.之后,当图像加载时,浏览器会确定其原生尺寸,重新计算页面布局,然后用图像重新绘制页面.但是,scrollspy完全没有意识到页面已经重新绘制,因此它继续使用陈旧的偏移量.
如果您在加载所有图像后刷新scrollspy,您会发现偏移是正确的.所以,问题是如何做到这一点.
一种解决方案是在每个图像上附加onLoad事件处理程序,然后在处理程序内刷新scrollspy.简化方法可能如下所示：
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
这是一个working jsfiddle example.请注意,图像的加载处理程序必须在图像实际加载之前注册.否则,它不会被解雇.这就是我在这里使用内联事件处理程序的原因.更优雅的解决方案留给读者.
