5

我已经使用引导程序设置了一个页面。（http://ethnoma.org/about.html）我有一个附加的侧边栏导航（效果很好）。我也在这个导航上使用 bootstrap scrollspy，并且导航中的所有链接都在同一页面内（使用 ancors）。一切正常（即使添加了平滑滚动插件）。在将所有内容添加到页面（我将其放在<head>.

<script type="text/javascript">
// ScrollSpy
$(function () {
    $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
    });
});
</script>

然后我的客户要求我将图像添加到页面。我这样做是使用引导标记和 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中查看问题的实际效果

4

2 回答 2

2

我自己也遇到了这个问题，所以我想我会提供一些解释和可能的解决方案，以防其他人发现自己陷入这种困境。

首先，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"/>

这是一个有效的 jsfiddle 示例。请注意，必须在图像实际加载之前注册该图像的加载处理程序。否则，它不会被解雇。这就是我在这里使用内联事件处理程序的原因。一个更优雅的解决方案留给读者。

于 2014-12-04T04:00:07.310 回答
1

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

我相信这是因为图像没有设置高度。通过检查页面，我发现页面中包含的浮动图像的高度设置为auto，并且当我在 CSS 中的媒体查询后将​​其设置为特定值时，我的 Scrollspy 工作正常。

于 2013-09-03T08:46:57.103 回答