浮动图像弄乱了Bootstrap Scrollspy
我已经使用bootstrap设置了一个页面。(http://ethnoma.org/about.html)我有一个附加的侧边栏导航(它工作得很好)。我也在这个导航上使用bootstrap scrollspy，导航中的所有链接都在同一个页面内(使用ancors)。一切都运行得很好(甚至添加了一个平滑滚动插件)。我只需调用此脚本来强制Scrollspy在所有内容添加到页面(我将其放在<head>中)后进行刷新。
<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激活页面下方比当前位置更远的内容链接。
我不知道如何迫使Scrollspy在计算主播链接ID的位置时将浮动图像考虑在内。你们谁知道我怎么才能解决这个问题。您可以在下面的页面http://ethnoma.org/about.html中查看该问题的效果
回答 2
Stack Overflow用户
发布于 2014-12-04 12:00:07
我自己也遇到了这个问题，所以我想我应该提供一些解释，以及一个可能的解决方案，以防其他人发现自己陷入了这个困境。
首先，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。请注意，在实际加载图像之前，必须注册该图像的加载处理程序。否则，它就不会被解雇。这就是我在这里使用内联事件处理程序的原因。一个更优雅的解决方案留给了读者。
Stack Overflow用户
发布于 2013-09-03 16:46:57
我在尝试使用Bootstrap中的Scrollspy时遇到了这个问题，似乎脚本在计算时没有考虑到图像的高度，因此导致Scrollspy是准确的。
我相信这是因为图像没有设置高度。通过检查页面，我发现我在页面中包含的浮动图像的高度设置为auto，并且当我在CSS中进行媒体查询后将其设置为特定值时，我的Scrollspy工作得很好。
https://stackoverflow.com/questions/15772588
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号