4

私が開発しているワードプレスのテーマに追加した小さな機能を滑らかにしようとしています。スタック オーバーフローからの次の 2 つの Q&A のおかげで、スクロール後に (ウィンドウの幅が 300 ～ 500 ピクセルの場合のみ) ナビゲーションを画面の上部にロックすることができました。

スクロール時にオブジェクトをブラウザー ウィンドウの上部に固定する

と

この要素をスクロール時にページの上部に固定するにはどうすればよいですか?

問題は、私のウェブサイト ( digitalbrent.com ) をモバイル デバイス (私は iphone 4 を使用しています) で表示すると、下にスクロールすると、ナビゲーション アイコンが画面の上部に固定されていることに気付くでしょう。ナビゲーションが上部に表示されるようにスクロールを停止します。ユーザーがアクティブにスクロールしている間でも、ナビゲーションがページの上部に表示される前にユーザーがスクロールを停止するのを待つのではなく、ページの上部で非常にスムーズに停止するように修正したいと思います。どうすればこれを行うことができるかについて、誰かが私を正しい方向に向けることができますか? .scroll よりも優れた機能はありますか? どんな助けやアドバイスも大歓迎です。ナビゲーションを画面の上部にロックするために使用しているコードは次のとおりです。

jQuery:

$(function() {
            var max_scroll = $("#nav").position().top;
            $(document).ready(function() {
                $(window).scroll(function() {
                    var navAdjust = $(".navScroll");
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    if (scrollTop > max_scroll && !navAdjust.is(".navScrollFixed")) {
                        navAdjust.addClass("navScrollFixed");
                    }
                    else if (scrollTop < max_scroll && navAdjust.is(".navScrollFixed")) {
                        // console.log("return to normal");
                        navAdjust.removeClass("navScrollFixed");
                    }
                });
            });
        });

CSS:

#nav.navScrollFixed{
    position:fixed;
    top: 0;
    z-index: 100;
    background: black;
    border-bottom: 5px solid #27f231;
    width: 100%;
    left: 0;
    margin-left: 0px;
    margin-top: 0px;
}

HTML:

<div id="nav" class="navScroll">
                <ul>
                    <li id="home">
                        <div class="navIcon"></div>
                        Home
                    </li>
                    <li id="blog">
                        <div class="navIcon"></div>
                        Blog
                    </li>
                    <li id="resume">
                        <div class="navIcon"></div>
                        Resume
                    </li>
                    <li id="portfolio">
                        <div class="navIcon"></div>
                        Portfolio
                    </li>
                    <li id="lab">
                        <div class="navIcon"></div>
                        &nbsp;Lab&nbsp;
                    </li>
                    <li id="contact">
                        <div class="navIcon"></div>
                        Contact
                    </li>
                </ul>
            </div>

繰り返しますが、コードは機能しています。モバイル デバイスでスムーズにしたいだけです。

4

1 に答える 1

0

iPhone と iPad のモバイル サファリは、スクロールが停止するまで onScroll イベントを発生させないと思います。したがって、ユーザーがスクロールすると css を調整するスクリプトは、スクロールが停止するまで実行されません。また、スクロール中に継続的にイベントを発生させることもありません。一方、Android では、スクロール中にイベントが即座に発生し、継続的に発生します。これは応答性が高くなりますが、1 秒あたり最大 60 回起動されるため、スクロール ベースの処理が電話の速度を低下させる可能性があります。

于 2014-02-06T18:19:56.477 に答える