Question

Example Page在FF＆amp; Chrome但不在Safari中。有一些位置变化（从固定到静态返回到固定）但我不知道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'）向下扩展，“页脚”从固定位置变为静态位置并增加其高度。但不是在Safari中。有任何想法吗？另外：有没有办法让页面在路标功能中滚动到底部？这由于某种原因不起作用

$('html, body').animate({scrollTop: $(document).height()-$(window).height()}, 1400, "easeOutQuint");

Answer 1

我没有对您的特定代码的答案，但通常使用fixed位置元素作为航点（此处为footer）不会按预期方式运行。 Waypoints通过查看元素相对于文档的滚动位置来工作，并且固定位置元素在这方面总是在变化。

jQuery waypoints在Safari中不起作用

1 个答案: