How can I make a div scroll with page and stop at footer?

Hi,

I'm having a problem trying to figure out how to make a div scroll with the page and stop at a certain point so that it doesn't go over the footer. Here's a quick video explaining what I'm trying to accomplish. Thanks for any help you can offer me in getting this problem solved!


[video]

 

Hey I figured out this so far from a demo I found.... My problem is that the yellow sidebar attaches to the footer like a magnet when it gets too close to it instead of being a smooth transition that stops when it hits it. Any ideas as to why this could be happening? Thanks

http://phoenixlove.net/fun/

 

What you're needing is what is called a "Sticky Floater". I also noticed you're using Wordpress, so this makes the job a whole lot easier. I would recommend installing the plugin found here:

https://wordpress.org/plugins/q2w3-fixed-widget/

This will create a widget for you. So what you will be needing to do is create this as a side, using the sidebar.php files within your theme. Then create a widget. Then when you install this plugin I recommended, you'll be able to set the sidebar you have created within this plugin, which should be now set up as a widget.

I know it's not as easy as I make it out to be. If you don't know PHP I would suggest hiring a freelancer to do this for you. Which I wouldn't pay any more than $30-40 for this project. So use Freelance.com and post this job up and get your project a budget of $30.

I hope this has helped. But keep in mind, it's called a "Sticky Floater", so search for this term will bring more related queries for you.