以下は、iOS デバイスで見られるスティッキー ヘッダー効果をシミュレートする小さなスクリプトです。
$('.scrolllist').scroll(function(){
$(this).find('ul').each(function(){
if($(this).position().top <= 0){
$(this).addClass('abs').find('strong').removeClass('mov');
if($(this).position().top <= ($(this).height() * -1)){
$(this).removeClass('abs');
$(this).find('strong').addClass('mov');
}
else {
$(this).addClass('abs');
$(this).find('strong').removeClass('mov');
}
}
else {
$(this).removeClass('abs').find('strong').removeClass('mov');
}
});
});
各要素のステータスを からpostion:absolute, top:0
に変更するとposition:absolute, bottom:0;
同時に、包含を<ul>
からposition:relative
に変更することで、各要素の位置を変更します。position:static
サンプル: http://jsfiddle.net/dMJqj/80/
少しでもスムーズにするためにできることはありますか。Chrome と Firefox では少しぎこちなく見えます。スティッキー ヘッダーが点滅しているように見えるため、トリガーに数分の 1 秒かかる場合があります。