스크롤 할 때 위쪽에서 아래쪽으로 높이를 늘리려면 고정 바닥 글 가져 오기

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}); 

또한 I 변수 foo에 보이지 않는이 I 보는 하나만 위치 함수 내에서 정의된다.

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

또한

, 난 당신이 첫 번째 단계 요소의 위쪽으로 바닥 글의 상단을 설정 눈치 그게 왜 : 당신은 당신의 코드가 다른 곳이 없다면, 당신은 계산으로 대체 할 필요가 위쪽으로 자라며 내용을 다룹니다. 바닥 글 위치를 상대적으로 높이고 높이를 60px로 설정하고 애니메이션을 600px로 애니메이션하려고하는 것이 좋습니다. 그래서 그것은 내용 아래에 머무를 것이고 페이지는 그것을 포함하기 위해 커질 것입니다.

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