0

我为我的新站点创建了一个水平仪。

我使用了固定浮动的想法，但试图将其限制在管的范围内。它并不完美，但它得益于页面的简短性。

我怎样才能使它更平滑（特别是在缓慢滚动时）？

此外，当我使用 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-indexing 和绝对定位是灾难性的失败。为什么是这样？

4

1 回答 1

0

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

$('#bubble').animate({'top': (temp<-50?-50:(temp>50?50:temp)) +'%'},{duration:200})
    .animate( [...]
于 2012-05-08T15:17:00.867 回答