Have Geek Brain

JQuery Show / Hide Div when section is in Viewport

My code is currently located here: http://www.jaygeorge.co.uk/gwennan-sage

You will 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 showing, preferably using the fade () method.

I've tried the Viewport plugin but can't get it to work fine with if statements, I'm pretty sure it can be done with regular jQuery by measuring the dimensions of the div somehow.

Any advice is appreciated, thanks in advance.

+1


a source to share


2 answers


Hide the green arrows and then onscrolling, check if the div position of the timeline is greater than the window height plus the scroll offset. If it is larger, it means that the timeline is in view and the arrows should be shown.



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

+3


a source


Move these arrows to #gwennan-header

and remove the fixed css attribute and set the z-index. This way you won't need any Javascript at all.



0


a source






More articles:


All Articles