1

ページの少し下にタブ付きのナビゲーション バーがある Web ページがあります。ページはレスポンシブなので、ウィンドウの高さと幅は変更される場合があります。私のコードはデスクトップ環境では問題なく動作しますが、iPhone や iPad でプルアップすると、$(window).scroll関数の応答が遅くなります。下にスクロールすると、画面のスクロールが停止したときにのみ、機能が実行されます。それは私の固定ナビゲーション遅延を表示または非表示にします。助言がありますか?以下のコードサンプル:

HTML:

<div id="retail-nav">
                <div id="navwrap">
                    <ul>
                        <li id="retail-tab-1"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li>
                        <li id="retail-tab-2"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li>
                        <li id="retail-tab-3"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li>
                    </ul>
                </div>
            </div>
            <div id="retail-nav-float">
                <div id="navwrap-float">
                    <ul>
                        <li id="retail-tab-1-float"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li>
                        <li id="retail-tab-2-float"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li>
                        <li id="retail-tab-3-float"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li>
                    </ul>
                </div>
            </div>

JavaScript

var navHeight = jQuery('#retail-nav').offset().top;
                jQuery(window).scroll(function () {
                    if(jQuery(window).scrollTop() > navHeight) {
                        jQuery('#retail-nav-float').css('display', 'inline');
                    }else{
                        jQuery('#retail-nav-float').css('display', 'none');
                    }
                });

CSS:

 #retail-nav{
    width: 100%;
    height: 55px;
    background-color: #494949;
    overflow: hidden;
    position: relative;
}
#retail-nav-float{
    width: 100%;
    height: 55px;
    background-color: #494949;
    overflow: hidden;
    position: fixed;
    top:0;
    display: none;
}
#navwrap, #navwrap-float{
    height: 100%;
    width: 100%;
    max-width: 1012px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -13px;
    text-align:center;
    line-height: 55px;
}
4

1 に答える 1

2

電話とタブレットの場合、イベントを追加する必要がありtouchmoveます。

例えば

element.addEventListener("touchmove", touchMove, false);

このページでは、それについて詳しく説明しています: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

これがお役に立てば幸いです!

于 2013-09-27T17:04:46.050 に答える