jQuery waypoints在Safari中不工作

Example Page在FF & Chrome中运行得非常好，但在Safari中无法运行。有一些位置变化（从固定到静态回到固定），但我不知道Safari有w /定位（非移动Safari）的任何问题。下面是我的代码：jQuery waypoints在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");

来源

2013-05-10 Dirty Bird Design

我没有回答您的特定代码，但一般使用的航点（这里footer）一个fixed位置元素不会在上班的路上你的期望。 Waypoints通过查看元素相对于文档的滚动位置来工作，并且固定位置元素在这方面始终在变化。

来源

2013-05-19 17:24:37 imakewebthings

我有两个想法来解决这个问题，我看起来都没有正确实现。在固定位置页脚上方是一个div #mid，如果我能找到它的底部，我可以将它存储在一个变量中，并将其用作航点？它始终是'在视图中'，所以我不认为在这里使用'bottom-in-view'会有效。第二个想法是创建一个相对定位的div＃shim，并将其定位在页面之外或使其边缘等于它的高度并使用它...有什么好处？ – 2013-05-21 03:48:30

第一个可以通过使用'offset：function（）{return - $（this）.outerHeight（）; }' – imakewebthings 2013-05-24 03:33:13

谢谢，效果更好...... – 2013-05-29 18:38:17

jQuery waypoints在Safari中不工作

回答

相关问题