1

私は現在、ホームページの上部にナビゲーション メニューがある Web サイトのモバイル バージョンに取り組んでいます。このナビゲーション メニューで jquery スムーズ スクロールを使用しているため、ユーザーがメニューからトピックを選択すると、ページのさらに下にある特定の項目にうまくスクロールします。これは見事に機能し、問題はありません。

ただし、このサイトで見つけたコードも使用しています。これにより、ユーザーが特定のポイントを超えてスクロールすると、ナビゲーション メニューがページの上部に固定されます。（私の場合は160px）そのコードは次のとおりです。

/* Dynamic top menu positioning
     *
     */

    var num = 160; //number of pixels before modifying styles

    $(window).bind('scroll', function() {
        if ($(window).scrollTop() > num) {
            $('.framecont').addClass('fixed');
        }
        else {
            $('.framecont').removeClass('fixed');
        }
    });

また、必要に応じて .framecont と .fixed の CSS を次に示します。

.framecont{
    background-color: #FFFFFF;
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
    box-shadow: 0 -55px 1px -7px #FFFFFF inset;
    color: #FFFFFF;
    overflow-x: scroll;
    padding-bottom: 3px;
    position: absolute;
    top: 110px;
    -webkit-overflow-scrolling:touch;
    width: 100%;
    z-index: 99;
    }

.fixed {
border-bottom: 5px solid grey;
border-top: 5px solid grey;
box-shadow: 0 0 30px #000;
padding-bottom: 10px;
padding-top: 5px;
position:fixed;
top:0;
}

ユーザーがナビゲーション メニューから項目を選択すると、jquery のスムーズ スクロールが開始され (上記のコードと同様)、スクロールが 160px を超えるとすぐにメニューがページの上部にスナップされます。これは素晴らしい。しかし、ユーザーが手動でページを 160px を超えてスクロールすると (ナビゲーション メニュー項目を選択する代わりに指を使用してスクロールする)、メニューがページの上部に固定表示されるまでにかなりの遅延が発生します。ユーザーが手動でページを指でフリックすると、ページの上部に固定されたメニューが表示される前に、スクロールが完全に停止する必要があります (ユーザーは画面から指を離す必要があります)。

このラグは、私が解決しようとしている問題です。ユーザーがナビゲーション メニュー項目を選択して jquery のスムーズ スクロールが開始したときと同じように、ユーザーが手動で 160 ピクセルを超えてスクロールしたときに、メニューがウィンドウの上部に固定された状態ですぐに表示されるようにしたいと思います。これは可能ですか?

まだ理解していない場合は、私は JavaScript とコーディング全般に非常に慣れていません。このサイトで質問するのはこれが初めてなので、適切なマナーを守っていない場合は事前にお詫び申し上げます。

4

0 に答える 0