新しいサイト用の水準器を作成しました。
固定フロートのアイデアを使用しましたが、チューブの領域に限定しようとしました。完璧ではありませんが、ページの短さが助けになっています。
どうすればスムーズにできますか (特にゆっくりスクロールする場合)。
また、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();
}
}
編集：
うわー、Samsung Galaxy S1 (標準の Web ブラウザー) で確認しました。メジャー テープの Z インデックスと絶対位置合わせは、悲惨なほど失敗しています。どうしてこれなの？