0

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

3 回答 3

0

我建议从#toolbar绝对定位的 div 开始，然后在 scrollTop() 超出 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 回答
0

您是否正在寻找更顺畅的东西。我会推荐使用 Ben Alman 的油门和去抖动 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);
        }​
    }
于 2012-07-25T21:21:58.177 回答