我已经使用引导程序设置了一个页面。(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中查看问题的实际效果