Gua*_*eek 5 javascript jquery css-float twitter-bootstrap scrollspy
我已经使用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上看到有效的问题
小智 1
我自己在尝试使用 Bootstrap 中的 Scrollspy 时遇到了这个问题，似乎脚本在计算时没有考虑图像的高度，从而导致 Scrollspy 不准确。
我相信这是因为图像没有设置高度。通过检查页面，我发现页面中包含的浮动图像的高度设置为auto，当我在 CSS 中的媒体查询后将其设置为特定值时，我的 Scrollspy 工作正常。
| 归档时间： |
|
| 查看次数： |
1099 次 |
| 最近记录： |