How do I change an inner div to fixed after I scroll to the bottom of it?

Question

I have a div within a div and I want to make inner div absolute but upon scroll to the bottom it changes to a fixed div. Its a side bar right now, I want it to scroll with the middle until it is at the bottom of the div and then have it become fixed.

Any idea?

I tried messing with this code but I can't seem to figure it out:

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $("#right_side_bar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                document.getElementById("#right_side_bar").style.position = 'fixed';

                } else {

                };
            });
        });
    </script>

Image: https://i.stack.imgur.com/S2Nbi.png

So the above code doesn't work but here is a further explanation of the issue. I have a huge div called container. Then a right sidebar called "right_side_bar. The right_side_bar has more content than is showing so I want it to scroll with the container, but as soon as all of the content is shown in the right_side_bar (meaning the user has scrolled to the bottom) then I want it to stop scrolling with the page and just become fixed. If the scroll goes back to the top, then it should become absolute again. Let me know if this makes sense!

https://i.stack.imgur.com/S2Nbi.png

  #right_side_bar{
position:absolute;
margin-top:38px;
    width:272px;
    margin-left:722px;
    background-color:#FFF; /* D6E6F7 */
    height:100%;
    overflow:scroll;
    z-index: 0;
}

#container{

    width: 994px;
    /*height: 885px;*/

    background-color: #D6E6F7;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*padding-bottom: 30px;*/
}

duplicate question http://stackoverflow.com/questions/5609255/javascript-jquery-perform-function-when-user-scrolls-near-bottom-of-page — Scott Selby, Jul 13 '12 at 02:53

Michael Zaporozhets · Answer 1 · 2012-07-13T04:02:07.543

0

Based on what you've asked I've created an outer div (#outer) and an inner div (#inner) and from what I understand you want the inner div do become fixed after it has been scrolled to the bottom.

in it's most primitive form i think i've done what you're asking (although i'm not 100% sure what the question is)

example: - http://jsfiddle.net/eQtrG/12/

html:

<div id="container">
 <!-- LOTS OF CONTENT -->
    <div id="right_side_bar">
      <!-- LOTS OF CONTENT -->
    </div>
 <!-- LOTS OF CONTENT -->
</div>

css:

#container { position: absolute; width: 100%; background: #CCC; }
#right_side_bar {position: absolute;width:100%; height: 100px; background: #FF0000; overflow-x: hidden; overflow-y scroll; margin:0px;z-index: 9999; top: 250px; }

jquery:

$("#container").scroll(function(){
  $("#right_side_bar").scrollTop($("#container").scrollTop());
});

$('#right_side_bar').bind('scroll', function() {
 if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
     $(this).css({position:'fixed', top: '60px'})
 }
         else
         {
         $(this).css({position:'absolute', top: '250px'})
         }
});

edited Jul 13 '12 at 04:02

answered Jul 13 '12 at 03:09

Michael Zaporozhets

23,588
3
30
47

Sorry, I guess the question needed work. I want them both to scroll at the same time (as you scroll down the page) but one will reach its end before the other, when that one does reach its end, I want it to then become fixed. Does that help? – Daniel Fein Jul 13 '12 at 03:15
wait, you want to scroll the content of both divs simultaneously? – Michael Zaporozhets Jul 13 '12 at 03:16
yes, and then when you get to the bottom of one of them, then it becomes fixed and the other continues to scroll. – Daniel Fein Jul 13 '12 at 03:18
ohhh haha okay now I get it, let me try some sorcery – Michael Zaporozhets Jul 13 '12 at 03:19
Hey, no luck so I added some more details / an image to make sure you understand what i'm talking about. image here: http://i.stack.imgur.com/S2Nbi.png, details above! Thanks in advance – Daniel Fein Jul 13 '12 at 03:41

How do I change an inner div to fixed after I scroll to the bottom of it?

1 Answers1