Andrea asked,
@srikat Any chance of a tutorial? Client wants bottom sidebar widget to fade in and stick like on Pat Flynn’s blog: http://t.co/5leVweR1zI
— Andrea Whitmer (@awhitmer83) January 30, 2014
In this post I am going to share a way of doing this using Waypoints, Animate.CSS and StickyJS.
Here's the overall flow:
Opacity of the last widget in Primary sidebar is going to be set to 0 via CSS. As the user scrolls down, when the top of last widget is at 50% from top of viewport, animated and fadeIn classes will be added to the widget using Waypoints. The CSS3 animations included in Animate.CSS will kick in and our widget will fade into view. As the top of the widget touches the top of viewport, the widget will get stuck thanks to position:fixed; via StickyJS. As the user scrolls up, we shall remove fadeIn class from the last widget and add fadeOut instead so that widget fades out and disappears.
Step 1
Upload animate.min.css to child theme directory/css.
Step 2
Upload waypoints.min.js to child theme directory/js.
Create a file named say, waypoints-init.js having the following code in the same location:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
