How can I make a div stop scrolling up when it's bottom is reached?

Question

I want to do something like the 3rd column of Facebook home page from left (where ads appear). When you scroll the page upward, all three columns scroll, but then 3rd column stops scrolling. How to do that? Can it be done with CSS?

Possible duplicate of [Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element](http://stackoverflow.com/questions/22261460/stop-jquery-fixed-position-scrolling-when-bottom-of-scrolling-element-reaches-en) — BSMP, Dec 09 '15 at 16:16

score 0 · Answer 1 · answered Dec 09 '15 at 16:12

0

I think Facebook does it with a mix of javascript/css When user is scrolling down, they change position attribute to right col element to fixed.

position: fixed

answered Dec 09 '15 at 16:12

Julien Alary

780
1
5
16

score 0 · Answer 2 · answered Dec 09 '15 at 16:19

0

try this sticyjs puigin http://stickyjs.com/

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script

answered Dec 09 '15 at 16:19

Sanjay Gohil

144
10

score 0 · Answer 3 · answered Dec 09 '15 at 16:26

In the bootstrap world, this is called affix. Basically, you're listening to the scroll event with javascript and changing the styling (css) based on breakpoints (specific scroll position).

To answer the second question, I don't believe it can be done solely with CSS.

How can I make a div stop scrolling up when it's bottom is reached?

3 Answers3