Question

我已经使用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

中看到有效的问题

Answer 1

我自己刚刚遇到过这个问题，所以我想我会提供一些解释，以及一个可能的解决方案，以防其他人发现自己处于此绑定状态。

首先，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。请注意，必须在图像实际加载之前注册该图像的加载处理程序。否则，它不会被解雇。这就是我在这里使用内联事件处理程序的原因。更优雅的解决方案留给读者。

Answer 2

在尝试使用Bootstrap中的Scrollspy时遇到了这个问题，似乎脚本在计算时没有考虑图像的高度，因此导致Scrollspy准确。

我认为这是因为图像没有设置高度。通过检查页面，我发现页面中包含的浮动图像的高度设置为 auto ，当我在CSS中进行媒体查询后将其设置为特定值时，我的Scrollspy工作得很好。

浮动图像搞乱了Bootstrap Scrollspy

2 个答案: