让jQuery顶部工具栏不那么跳跃

Making jQuery top toolbar less jumpy

本文关键字：跳跃 工具栏 jQuery 顶部      更新时间：2024-02-29

我正试图在页面顶部添加一个工具栏。唯一能把它推开的就是标志。我的情感是有效的，但滚动非常跳跃。如果滚动速度很快，尤其是在手机上，则需要几毫秒才能重新定位，效果显而易见。这只是一个例子。在我的真实站点中有一个徽标图像，工具栏中包含图像。文本应该在工具栏下流动，因此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>

我建议从#toolbardiv绝对定位开始，然后在scrollTop（）超过35像素时切换到"固定"定位。这就避免了必须制作任何动画，这听起来像是你遇到麻烦的地方。

请参见此示例：http://jsfiddle.net/2LLry/

这可能对您有用：

<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>

您是否在寻找更流畅的东西。我建议使用本·阿尔曼的节流阀和防反弹jquery插件它将减少回调事件的数量以获得更好的性能，尤其是在移动设备上

如果希望滑动效果更平滑、更慢，也可以包含一些动画。

这里有一个演示，你可以玩它，包括两者（你需要节流/反跳和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);
        }​
    }
相关文章：