例のページは、FF と Chrome ではほとんど期待どおりに機能しますが、Safari では機能しません。いくつかの位置の変更があります (固定から静的に戻って固定に戻る) が、Safari に位置付けに関する問題 (非モバイル サファリ) があることは認識していません。以下は私のコードです:
$(function(){
var footerPos = function () {
var w = $(window).height();
var top = (w-110);
$('footer').css('top', top);
};
$(document).ready(footerPos);
$(window).resize(footerPos);
$('footer').waypoint(function(direction) {
if (direction === 'down') {
$('footer').css({'position':'static'}).animate({'height':'600px', 'top':'auto'}, 400, footerPos) ;
$('.tfContent').css({'height':'200px'});
$('p.extra').fadeIn('fast');
$('#arrow').addClass('arrowDown');
console.log('down');
} else if (direction === 'up') {
$('.tfContent').css({'background':'white'});
$('footer').css({'position':'fixed','top':footerPos});
$('.tfContent').css({'height':'60px'});
$('p.extra').slideUp('fast');
$('#arrow').removeClass('arrowDown');
console.log('up');
}
}, { offset: 'bottom-in-view' });
最初に Chrome を見ると、ページの一番下までスクロールすると、白いコンテンツ (「.tfContent」) が下に展開され、「フッター」が固定位置から静的位置に変わり、高さが増加することがわかります。しかし、サファリではありません。何か案は?また、ウェイポイント機能でページを一番下までスクロールさせる方法はありますか? これは、何らかの理由で機能しません
$('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 1400, "easeOutQuint");