1

我正在尝试在某些浏览器中修复我网站上的 bootstrap scrollspy。我发现（并且已经看到了很多讨论）由于 body 元素的高度为 100%，scrollspy 在某处不起作用。

我用这个问题创建了简单的网页（在 Opera 20 中运行良好，例如在 Firefox 7 中不起作用）。当我移除身高 100% 时，一切正常。问题是我需要有 100% 的身高。有一些解决方法吗？知道如何修复它并保持身体元素的 100% 高度吗？谢谢！

jsfiddle.net 示例：http: //jsfiddle.net/eedZL/

CSS：

*{width:0;margin:0;}
html,body{width:100%;height:100%;}
.promo{width:100%;height:100%;background:#ccc;text-align: center;}
.slide{width:100%;height:500px;background:#333;}
.navigation{position:fixed;width:400px;height:300px;background:#fff;right:20px;top:20px;}
.navigation ul li{list-style-type: none;width:200px;}
.navigation ul li.active{color:red;background: #ccc;padding:10px;}

HTML

...
<body data-spy="scroll" data-target=".navigation">

<div class="promo" id="home">Some welcome screen</div>
<div class="slide" id="first">Slide #1</div>
<div class="slide" id="second">Slide #2</div>
<div class="slide" id="third">Slide #3</div>
<div class="navigation">


        <ul class="standard-nav nav nav-tabs">
            <li><a class="scrolling-nav" href="#home">Welcome screen</a></li>
            <li><a class="scrolling-nav" href="#first">First slide</a></li>
            <li><a class="scrolling-nav" href="#second">Second slide</a></li>
            <li><a class="scrolling-nav" href="#third">Third slide</a></li>
        </ul>


</div>
</body>
...

JS

$(document).ready(function(){
  $('body').scrollspy({ target: '.navigation', offset: 100});
});
4

0 回答 0