0

ページの上部にツールバーを貼り付けようとしています。邪魔にならないのはロゴだけです。私の効果は機能しますが、スクロールが非常に不安定です。特に携帯電話で非常に高速にスクロールすると、位置を変更するのに数ミリ秒かかり、その効果は顕著です。これは単なる例です。私の実際のサイトにはロゴ画像があり、ツールバーには画像が含まれています。テキストはツールバーの下に流れる必要があるため、Z インデックスが高くなります。ユーザーが一番上までスクロールすると、ロゴが押し下げられます。

        <html>
                <head>
                <style type="text/css">
                #logo {
                        width:100%;
                        height:34px;
                }

                #toolbar {
                        position: fixed;
                        top: 35px;
                        z-index:1000;
                }
                </style>
                </head>
                <body>
                        <div id="logo">LOGO</div>
                        <div id="toolbar">TOOLBAR</div>
                        <div id="content">
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                                <p>lorem ipsum doler</p><br />
                        </div>
                </body>
                <script>
                  $(document).scroll(function(e) {
                    if($(window).scrollTop() < 35)
                        $("#toolbar").css('top',(35 - $(window).scrollTop()) +  'px');
                      else
                   $("#toolbar").css('top','0px');
               });
               </script>
        </html>
4

3 に答える 3

0

もう少し滑らかなものを探していましたか。Ben Alman のスロットルおよびデバウンス jquery プラグインを使用することをお勧めします。 特にモバイル デバイスでのパフォーマンスを向上させるために、コールバック イベントの数を減らします。

また、スライド効果をよりスムーズで遅くしたい場合は、アニメーションを含めることもできます。

これは、両方を含む再生可能なデモです (throttle/debounce および jqueryui プラグインが必要です:

JSFIDDLE: http://jsfiddle.net/collabcoders/vHs4s/

    $(document).scroll( $.throttle( 250, scrolling ) ); 

    function scrolling() {
         if($(window).scrollTop() < 35)
               $("#toolbar").animate({
                    top: 35 - $(window).scrollTop()
               }, 250);  
         else                 
               $("#toolbar").animate({
                    top: "0"
               }, 250);
        }​
    }
于 2012-07-25T21:21:58.177 に答える
0

絶対配置の divから始めて、#toolbarscrollTop() が 35 ピクセルを超えたときに「固定」配置に切り替えることをお勧めします。これにより、問題が発生しているように聞こえる何かをアニメーション化する必要がなくなります。

この例を参照してください: http://jsfiddle.net/2LLry/

于 2012-07-25T21:24:38.750 に答える
0

これはあなたのために働くかもしれません：

<html>
    <head>
        <style type="text/css">
            #header {
                position:fixed;
                top:0px;
                z-index: 1000;
            }
            #logo {
                    width:100%;
                    height:34px;
                    display: block;
            }

            #toolbar {
                    top: 35px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>

        <script>
          $(document).scroll(function(e) {
            if($(window).scrollTop() == 0)
                 $("#logo").show();
            else
                     $("#logo").hide();
          });
       </script>
    </head>
    <body>
        <div id="header">
        <div id="logo">LOGO</div>
        <div id="toolbar">TOOLBAR</div>
        </div>
        <div id="content" style="padding-top:50px;">
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
            <p>lorem ipsum doler</p><br />
        </div>
    </body>
</html>
于 2012-07-25T21:26:14.260 に答える