問題描述
jQuery 航點在 Safari 中不起作用 (jQuery waypoints not working in Safari)
Example Page works pretty much as desired in FF & Chrome but not in Safari. There are some position changes (from fixed to static back to fixed) but I'm not aware of any issues Safari has w/positioning (non mobile safari). Below is my code:
$(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' });
If you look in Chrome first, you will see when you scroll to the bottom of the page the white content ('.tfContent') expands down, the 'footer' changes from fixed to static position and increases it's height. But not in Safari. Any ideas? ALSO: is there any way to make the page scroll to the bottom in the waypoints function? This, for some reason doesn't work
$('html, body').animate({scrollTop: $(document).height()‑$(window).height()}, 1400, "easeOutQuint");
參考解法
方法 1:
I don't have an answer to your specific code, but in general using a fixed position element as the waypoint (footer here) is not going to work the way you expect. Waypoints works by looking at an element's scroll position in relation to the document, and fixed position elements are always changing in that regard.
(by Dirty Bird Design、imakewebthings)