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!

https://youtu.be/MbF7Sn9uvG4

This sounds like a job for the CSS position: sticky value.
A couple of articles about that here:-

The bad news is that browser support is not yet universal, but there are “polyfills” available.
http://caniuse.com/#feat=css-sticky

Or you can do it the old way using Javascript, which I can’t help with, but I know some who can.
I think it was @PaulOB who came up with the first sticky header/footers.

A simple example:-

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/

I see you have gone for a javascript solution, not my strong area. But I do see what it’s doing with the css.
When the scroll reaches a certain point, the class .bottom is added to the element.

.bottom {
	top: auto;
	bottom: 0;
	position: absolute;
}

This places the element absolutely at the bottom of its parent. Adding a value (200px) to the bottom property (or adding marin-bottom) will bring it up off the very bottom a distance, which could be matched to the “switching” position. Though that does seem a bit “magic numberish”, not sure it will be robust in the wild. :thinking:

.bottom {
	top: auto;
	bottom: 200px;
	position: absolute;
}

Not sure if this will work cause the element isn’t exactly changing… but give the below a try…add to #sidebar

-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;

No. You can’t transition between positioning modes. It’s a straight jump from one to the other.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.