Получение фиксированного нижнего колонтитула для увеличения высоты сверху вниз на прокрутке

Question

У меня есть page - here с фиксированным нижним колонтитулом. Основное содержимое #mid.stages > .stages прокручивается за нижний колонтитул и с помощью путевых точек jQuery при прокрутке вниз в нижней части страницы нижний колонтитул должен получить высоту (сверху вниз), а раздел #topFooter должен раскрываться сверху вниз, чтобы показать его содержимое. Я пытался использовать различные решения безрезультатно, а именно из-за того, что при первоначальной загрузке нижний колонтитул имеет фиксированную позицию, а часть «раскрытия» находится вне окна браузера.

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

     $('#mid').waypoint(function(direction) { 
      var stagePOS = $('.stage').position(); 
      if (direction === 'down') { 
       //$('footer').animate({height:'600px', top:'stagePOS.top'},300,'swing', position); 
       $('footer').css({'position':'absolute', 'height':'600px','top':'stagePOS.top'}); 
       $('.tfContent').css({'height':'200px'}); 
       $('p.extra').fadeIn('fast'); 
      } else if (direction === 'up') { 
       $('footer').css({'position':'fixed','top':'foo'}); 
       $('.tfContent').css({'height':'60px'}); 
       $('p.extra').slideUp('fast'); 
      } 
      position(); 
     }, { offset: 'bottom-in-view' }); 
    }); 

Мне нужен подвал, чтобы расширить сверху вниз, так что он не закрывает содержимое в #mid.stages > .stages, в значительной степени противоположное тому, что у меня есть сейчас, и быть в состоянии использовать какую-то анимацию так это не так странно, как сейчас. Любое толчок в правильном направлении очень ценится.

Answer 1

Я заметил, что вы имеете в виду некоторые переменные между кавычками. Вам нужно удалить эти кавычки. В следующих строках:

$('footer').css({'position':'absolute', 'height':'600px','top':stagePOS.top}); 

В этой строке также я не вижу переменную Foo, только один я вижу, определяется в функции положения. Если у вас есть что-нибудь еще в вашем коде, вам нужно заменить его с расчетом:

$('footer').css({'position':'fixed','top':$(window).height()-110}); 

Кроме того, я заметил, что вы установите верхнюю часть нижнего колонтитула, чтобы быть в верхней части первой ступени элемента и поэтому его растет вверх и охватывает контент. Я бы предложил попытаться сделать положение нижнего колонтитула относительно, высота 60 пикселей и оживить рост до 600 пикселей. Таким образом, он будет оставаться ниже содержимого, и страница будет расти, чтобы его содержать.

$('footer').css({'position':'relative', 'height':'60px'}).animate({'height':'600px'}, 400) ;