jquery - 特定のポイントをスクロールした後にフローティング メニューを表示する方法は?

Question

ページ上の特定のポイント (例: 1000px) を超えてスクロールすると、4 つのメニュー タブが表示されるようにしたいと考えています。表示されたら左から右にスライドインしてほしい。これは私が目指しているものですが、ブラウザの左側にあります。どんな入力でも大歓迎です。

Answer 1

これはかなり一般的な出発点です。

$(function() {
    $(window).scroll(function() {  
        var topHeight = $('#element').height(); 
            var scroll = $(window).scrollTop();  

            if (scroll >= topHeight) {
                $(".floating-menu").addClass("show");
            }
            if (scroll < topHeight) {
                $(".floating-menu").removeClass("show");
            }

    });
});

.floating-menuメニューが と呼ばれ、デフォルトがあると仮定しますdisplay:none;。

変数 topHeight は、要素の高さ (メイン ナビゲーション/バナー エリアなど) に設定するか(window).height();、「折りたたみ」用に設定するか、静的な px 値に設定できます。

次に、スクロール値が topHeight より大きい場合、show のクラスが追加されます。CSSでそれをdisplay:block;