@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
@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 (@nutsandbolts) 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.
Upload animate.min.css to child theme directory/css.
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.
Thanks so much for this, Sridhar! I really appreciate it. The only issue I’m having is that the widget area is at the very very top of the screen, and when I’m logged in, the admin bar covers part of it. What do I need to do to offset that? I assumed the second CSS rule above would do it, but it doesn’t seem to be applying.
Yeah, that is for that purpose.
Can you provide the URL of your site? Although I am not sure I will be able to troubleshoot w/o admin access without which I can’t see the problem.
Also, how do I turn this off in my media queries? I just noticed that the widget area is ignoring the existing media query style rules and is staying sticky, as well as keeping the width of the original sidebar instead of expanding once it drops below the content.
Do you want to turn this off in mobiles/tablets/both?
I’d like to turn it off at the 1023px media query size, but it’s also wonky below 1279px. I’m using this with a separate bottom sidebar (as opposed to the last widget in the primary sidebar) but it doesn’t respond well at 1279px – it did before I added the fade in. The test site is at http://flipped.nutsandboltsmedia.com if you have time to take a look at the CSS.
That site is not loading for me. Can you check?
Hmm, it’s loading okay for me. Weird question, but where are you located? I had to block several countries from the server awhile back due to DDoS attempts, so if you’re outside the US, I may need to whitelist your IP.
I am in India. Going to DM my IP (not sure it will remain static) in Twitter.
Thanks so much for the tutorial and for your help in getting the kinks worked out. I know my client will be thrilled with this solution and it looks great! It’s working perfectly now. 🙂
Hi Sridhar, i’m not sure if I found the right place, but it looks like the same concept and I’m wondering if you have any additional thoughts. Thank you for all this tutorial. I know that I will be back!
I would like to made a “utility bar” widget above my header (which is still very much under construction) disappear from view when scrolling down except when at the end of reading a post – at the comment section. An example of this is:
As soon as you scroll down to the end of the post, the horizontal bar with the email subscription fades back in. How might I accomplish the same task?
Thank you in advance –
This is really cool! Thanks for sharing this code. I have a question about it. How to I allow the last widget to scroll up once it reaches the bottom of the page? Right now, it sticks and overlaps on top of my footer once a user scrolls to the bottom of the page. You can see a sample of what’s happening here: http://www.photographybb.com/mediso/camera-and-gear/the-camera-that-every-photographer-wants-to-own/ (scroll to the bottom).
This is awesome thanks. One question. Is there a way to make it unstick when the footer hit its and scroll up with the footer?
I’d love to know how to stop the widget towards the bottom of the page as well so as to avoid it floating over the footer.
The link is broken for Step 2, the waypoints.min.js file.
Looks like the Waypoints project owner changed things around.
Now it is at https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js.
Also note the change in the file name.
I used the waypoints CDNJS here: http://cdnjs.com/libraries/waypoints. Figured I might share that as they maintain links to libraries pretty well.
Just used this technique in another project. So awesome, thanks for making this!
Great tutorial and thank you for this. I placed the following information on the following website
For some reason the widget isn’t sticking. Can you maybe look at this and see if something needs to be added in .css?
http://orthopracticeus.com/wp-content/themes/news-pro/js/jquery.sticky.js shows 404 Page Not Found. Upload that file, jquery.sticky.js to js directory.
Can you share the solution for the media queries problem (like Andrea had above)? 🙂
Kindly reminder about the question left unanswered 🙂
To make this work only on desktops (non-handhelds) replace https://gist.githubusercontent.com/srikat/8783212/raw/functions.php with http://pastie.org/pastes/10239672/text.