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 回答