Question

我正在尝试将工具栏添加到页面顶部。唯一可以将它推开的是徽标。我的影响有效，但滚动非常跳跃。如果一个滚动非常快，特别是在移动电话上，重新定位自己需要几毫秒，效果是显而易见的。这只是一个例子。在我的真实网站中有一个徽标图像，工具栏包含图像。文本应该在工具栏下流动，因此高z-index。如果用户滚动到顶部，徽标应该将其向下推。

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

Answer 1

你在寻找更顺畅的东西吗？我建议使用Ben Alman的油门和debounce 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);
        }
    }

Answer 2

我建议从我们的#toolbar div绝对定位开始，然后在scrollTop（）突破35像素时切换到'固定'定位。这样可以避免任何动画，这听起来就像是你遇到麻烦的地方。

查看此示例： http://jsfiddle.net/2LLry/

Answer 3

这可能对您有用：

<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顶级工具栏不那么跳跃

3 个答案: