Question

In my project I have a long scrolling page that has a project grid. when you click on a project, I ajax load that project, then slide open a window pushing the project grid down, displaying the chosen project. Each projects will have different heights based on the content. I need the content that shows below the project grid to always show at the end of the page. Currently when the grid slides open it slides right over the “footer” content (rough example at the bottom).

The skrollr documentation says that if the window resizes, you should call the refresh function.

I run this function on init, on project grid click, and I don’t see the window adjusting to the new height of the content. The goal is to have the footer appear always a couple hundred pixels after the project grid whatever it’s current height/position.

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

Answer 1

I don’t think this is related to skrollr. If you want the footer to appear after the content, then make sure it’s there in the document flow. You are using position:fixed and mix it with other stuff. I recommend to first create the page without skrollr and then add animations using relative mode. The skrollr.css file you are using is outdated, it doesn’t exist any more.

After you made sure the footer is correctly placed, then you can call refresh to make your animations work (they depend on data-end, which changes and needs to be recalculated). In your case, that would probably be enough:

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

Btw, the skrollr documentation says

Window resizing is handled by skrollr.

refresh is only needed when you change the DOM and skrollr can’t detect that.