javascript skrollr 동적 콘텐츠를 기반으로하는 창 높이 업데이트

Question

내 프로젝트에서 프로젝트 그리드가있는 긴 스크롤 페이지가 있습니다. 프로젝트를 클릭하면 해당 프로젝트를로드 한 다음 선택한 프로젝트를 표시하는 창을 슬라이드하여 프로젝트 그리드를 아래로 밀어냅니다. 각 프로젝트의 내용에 따라 높이가 다릅니다. 프로젝트 격자 아래에 표시된 내용이 항상 페이지의 끝에 표시되어야합니다. 현재 그리드가 열릴 때 "바닥 글"내용 (하단의 대략적인 예) 위에 슬라이드됩니다.

skrollr 설명서에 따르면 창의 크기가 조정되면 새로 고침 기능을 호출해야한다고 나와 있습니다.

이 기능은 프로젝트 그리드 클릭시 init에서 실행됩니다. 콘텐트의 새 높이에 맞춰 창을 볼 수 없습니다. 목표는 바닥 글이 현재 높이/위치가 무엇이든 프로젝트 그리드 후에 항상 몇백 개의 픽셀로 나타나는 것입니다.

http://caava.elusiveform.com/example.html

Answer 1

나는 이것이 skrollr 관련이 있다고 생각하지 않습니다. 내용 뒤에 꼬리말을 표시하려면 문서 흐름에 꼬리말이 있는지 확인하십시오. position:fixed을 사용하고 다른 것들과 혼합하십시오. 먼저 skrollr없이 페이지를 만든 다음 relative mode을 사용하여 애니메이션을 추가하는 것이 좋습니다. 사용중인 skrollr.css 파일이 오래되어 더 이상 존재하지 않습니다.

바닥 글이 올바르게 배치되었는지 확인한 후 refresh으로 전화하여 애니메이션이 작동하도록 할 수 있습니다 (데이터가 변경되어 다시 계산해야 함). 귀하의 경우, 그것은 아마 충분하다 :

s.refresh(document.getElementById('footer')); 

Btw는의 skrollr 문서는

창 크기 조정이 skrollr에 의해 처리됩니다 말한다.

refresh은 DOM을 변경할 때만 필요하며 skrollr은이를 감지 할 수 없습니다.