0

フルウィンドウの div にレイアウトされたページがあります。ナビゲーションはナビゲーション ボタンを押すことで実行されます。ユーザーが div の間のスポットにスクロールできないようにするため、コンテナーに overflow:hidden を設定します。その部分はうまく機能します。

HTML:

<body>
    <div id="container">
        <div class="slide" id="slide1"> <span class="content">page 1</span>

        </div>
        <div class="slide" id="slide2"> <span class="content">page 2</span>

        </div>
        <div class="slide" id="slide3"> <span class="content">page 3</span>

        </div>
    </div>
<div id="navigation">
    <ul>
    <li><a href="#slide1" class="navbtn1" class="scroll">&nbsp;</a>
    </li>
    <li><a href="#slide2" class="navbtn2" class="scroll">&nbsp;</a>
    </li>
    <li><a href="#slide3" class="navbtn3" class="scroll">&nbsp;</a>
    </li>
    </ul>
</div>
</body>

そして、ここに私が使用しているJavaScriptがあります：

$(document).ready(function(){
// Make navbtn active when page is scrolled down to slide
$('#slide1').waypoint(function(down){
  $('#main .active').removeClass('active'); // remove the class from the currently selected
  $('#main a.navbtn1').addClass('active'); // add the class to the newly clicked link
});

$('#slide2').waypoint(function(down){
  $('#main .active').removeClass('active'); // remove the class from the currently selected
  $('#main a.navbtn2').addClass('active'); // add the class to the newly clicked link
});

$('#slide3').waypoint(function(down){
  $('#main .active').removeClass('active'); // remove the class from the currently selected
  $('#main a.navbtn3').addClass('active'); // add the class to the newly clicked link
}); 
});

上にスクロールするときに起動するコード ブロックがありますが、このように見えますが、「下」ではなく「上」で、オフセットは -1 です。

問題は、Waypoints jQuery プラグインを使用して #slide がビューポートの上部にあることを検出し、関連する navbtn でアクティブ状態を設定していることです。そして、ウェイポイントはもう発砲していません。overflow:hidden を削除すると機能しますが、ページを読み込んだときに一度だけ起動します。

overflow:hidden を使用すると、ウェイポイントが起動しなくなる理由はありますか?

4

1 に答える 1

0

Overflow:hidden を body 要素にのみ適用し、html および body 要素には適用しないようにしてください。私のために働いた

于 2013-10-03T08:44:48.923 に答える