The problem is that you push the elements down with translateY(2000px)
and then pull them straight back up with translate(0px)
. Chrome therefore leaves a place for them at the bottom if that makes sense.
This jsFiddle demonstrates the problem. (I didn't bother with all the vendor prefixes).
Instead, translate them down by default and pull them up on scroll, like so.
If it still prooves buggy, animate margin-top or top on absolute position. Translate doesn't affect page layout as much and is better for performance, but that's part of your problem, right?
on a different note, a few issues I found:
- The performance of your javascript here would be terrible. Every time the user scrolls up or down, even after all the animations are completed, you run this function to check the position. I'm sure you can refactor it a lot.
- You have to also consider users with javascript disabled. Currently there's nothing presented on the page.
- I think there's a min width set on your search box and it jots out of it's border on narrow screens.