更平滑的固定浮子

Question

我为my new site创建了一个精神层面。

我使用fixed float想法，但试图将其限制在管的范围内。它并不完美，但它的页面很短。

我怎样才能让它更顺畅（特别是在慢慢滚动时）？

此外，当我使用我的iPhone滚动时，它只能在我完成滚动而不是 滚动之后才能工作。这仅仅是iPhone滚动机制的限制还是有办法解决这个问题？

---

HTML：

<div id="spirit_level"> 
    <div id="shimmery"></div> <!-- just for y gradient -->
    <div id="shimmerx"></div> <!-- just for x gradient -->
    <div id="bumps"></div> <!-- just for another overlay -->

    <div id="tube"> 
        <div id="bubble"></div> 
        <div id="overside"></div> <!-- glass + line markings -->
    </div>
</div>
<div id="spirit_shadow"></div>

CSS：

使用固定定位放置水平仪，内部的所有内容都绝对定位（相对于水平仪）。

Javascript：

/* START: init spirit_level/bubble */
var bubble_h = 53, tube_h = 242, 
doc_h = parseInt($(document).height()),
viewport_h = parseInt($(window).height()),
scrollDepth = $(document).scrollTop(),
orig_scrollDepth = scrollDepth,
tube_top = viewport_h/2 - tube_h/2,
center = 0;

/*center the tube and bubble:
$('#tube').css('top', tube_top+'px')
    .addClass('bubble_prep');

placeBubble(1);
/* END: init spirit_level/bubble */

$(window).unbind("scroll").scroll(function () {
    placeBubble(0);
})

placeBubble()功能：

function placeBubble(first_time)
{
    scrollDepth = $(document).scrollTop();
    if(first_time)
    {
        $('#bubble').css('top', center + 'px');                     
    }

    temp = ((center - (scrollDepth - orig_scrollDepth))/viewport_h)*100;

    $('#bubble').css('top', (temp<-50?-50:(temp>50?50:temp)) +'%')
        .animate(
            {top: (center/viewport_h)*100+'%'},
            {duration:800,queue:false},
            {
                step: function(now, fx) {
                    //this is never called, don't know why
                    alert(now);
                }
            }, function(){
                /*
                    Should I do the following?
                    orig_scrollDepth = $(document).scrollTop();*/
            });

            /*Without the next line, the bubble slides down from the top of the 
            tube on any length scroll in any direction*/
            orig_scrollDepth = $(document).scrollTop();
     }
}

---

编辑：

哇，我刚刚用三星Galaxy S1（标准网络浏览器）查看了。卷尺的z-索引和绝对定位是灾难性的失败。为什么是这样？

Answer 1

也许你使用.css让它变得蠢蠢欲动？ .animate可能是一个合适的替代品，设置非常快，以便顺利滑动到临时起始位置，然后慢慢滑回中心。

$('#bubble').animate({'top': (temp<-50?-50:(temp>50?50:temp)) +'%'},{duration:200})
    .animate( [...]