問題與jQuery和waypoints.js改變高度

Question

我有一個固定的位置頁腳，從jquery函數獲取它的頂部位置。使用航點時，當我向下滾動時，#main是'bottom-in-view'，我無法改變頁腳的高度。有人有主意嗎？最終，這需要向下滑動並顯示更多的頁腳內容。 here is the fiddle是否有固定位置元素的動畫高度？

這裏是jQuery代碼：

$(function(){ 
     var position = function() { 
      var w = $(window).height(); 
      var f = $('footer').height(); 
      var foo = (w-f); 
      $('footer').css('top', foo); 
     }; 
     $(document).ready(position); 
     $(window).resize(position); 

     if (screen.width >= 768){ 
       $('#main').waypoint(function(direction) { 
        if (direction === 'down') { 
         $('footer').css({'height': "500px"}); 
         alert('hit rock bottom'); 
        } 
       }, { offset: 'bottom-in-view' }) 
       .waypoint(function(direction){ 
        if (direction === 'up') { 
         //$('footer').animate({height:'110px'},300); 
        } 
       }, { offset: 'bottom-in-view' }); 
     } 
    }); 

Answer 1

您的代碼是否正確執行和頁腳分配的550更大的高度。然而，由於它具有position: fixed高度的其餘部分顯示斷底的屏幕。調整高度後調用position()將解決您的問題。

看到這裏的修補程序：http://jsfiddle.net/VxqNa/

注意，如果你使用jQuery的animate()功能，則必須調用position()動畫是通過傳遞函數將被用作complete處理程序結束後。例如：

$('footer').animate({height:'110px'},300,'swing', position);