jQuery Show/Hide Div when Section is in Viewport

My code at the moment is here: http://www.jaygeorge.co.uk/gwennan-sage

You'll see two green arrows that are in a fixed position at the bottom of the page. I'm having trouble getting jQuery to hide these divs (#timeline-buttons) when the Timeline section is NOT in view, preferably using the fade() technique.

I've tried a Viewport plugin but can't get it to work properly with if statements, I'm sure it can be done with normal jQuery by measuring 开发者_运维知识库div heights somehow.

Any advice appreciated, thanks in advance.

Hide the green arrows and then onscrolling, test to see if the timeline div position is greater than the window height plus scrolling offset. If greater then that means that the timeline div is in view and the arrows should be shown.

Here is a quick fiddle demonstrating the effect: http://jsfiddle.net/EADDt/

Move these arrows into #gwennan-header and remove the fixed css attribute and set the z-index. That way you won't need any Javascript at all.