0

これが可能かどうかはわかりません。シングル ページ レイアウト サイトを作成しており、ホーム セクションにメニューがあります。

<nav>
   <ul id="navigation">
      <li><a href="#1" title="1">1</a></li>
      <li><a href="#2" title="2">2</a></li>
      <li><a href="#3" title="3">3</a></li>
      <li><a href="#4" title="4">4</a></li>
      <li><a href="#5" title="5">5</a></li>
   </ul>
</nav>

これは の中に置かれ<section id="home"></section>ます。

#home がフォーカスを失った場合、つまり別のセクション fx が表示された場合、そのメニューで別のレイアウトを使用することは可能ですか#3? ホームセクションでは、メニューは下部に配置されていますが、上部に固定して、ユーザーが下にスクロールしたり、リンクをクリックしたりしたときにレイアウトを変更したいと考えています。

または、別のメニュー fx #menu-scroll を作成する必要がありますか?

4

2 に答える 2

1

ドキュメントの別のセクションにスクロールしても、フォーカス (:focus セレクターを持つリンクまたはコントロール) は変更されないことに注意してください。これを処理するには、jquery の「スクロール」イベントの使用を検討してください。

$(window).scroll(function() {
    if ($(window).scrollTop < $("#home").offset().top) {
        $("#navigation").removeClass("scrolledDown").addClass("scrolledUp");
    } else {
        $("#navigation").removeClass("scrolledUp").addClass("scrolledDown");
    }
});

これは、いくつかのセクションに簡単に拡張できます。スクロール イベントは頻繁に発生するため、このハンドラではあまり多くのことを行わないでください。

于 2013-07-19T18:26:11.487 に答える