1

一部のブラウザーで、Web サイトのブートストラップ scrollspy を修正しようとしています。body 要素の高さが 100% であるため、scrollspy がどこかで機能しないことがわかりました (そして、すでに多くの議論を見てきました)。

この問題で簡単な Web ページを作成しました (Opera 20 ではうまく動作しますが、たとえば Firefox 7 では動作しません)。体の高さを 100% 削除すると、すべてが機能します。問題は、体の高さを 100% にする必要があることです。回避策はありますか？それを修正して body 要素の 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