滚动到底部后，如何将内部 div 更改为固定？

Question

我在一个 div 中有一个 div，我想将内部 div 设为绝对值，但滚动到底部后它会变为固定 div。它现在是一个侧边栏，我希望它与中间滚动，直到它位于 div 的底部，然后将其固定。

有什么想法吗？

我试图弄乱这段代码，但我似乎无法弄清楚：

 <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>

图片：http://i.stack.imgur.com/S2Nbi.png

所以上面的代码不起作用，但这里是对该问题的进一步解释。我有一个名为容器的巨大 div。然后是一个名为“right_side_bar”的右侧边栏。right_side_bar 的内容比显示的要多，所以我希望它与容​​器一起滚动，但只要所有内容都显示在 right_side_bar 中（意味着用户已经滚动到底部）然后我希望它停止与页面一起滚动并变得固定。如果滚动回到顶部，那么它应该再次变为绝对。让我知道这是否有意义！

http://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;*/
}

Answer 1

根据您的要求，我创建了一个外部 div (#outer) 和一个内部 div (#inner)，据我了解，您希望内部 div 在滚动到底部。

这是最原始的形式，我认为我已经完成了您的要求（尽管我不是 100% 确定问题是什么）

示例： - 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'})
         }
});
​

​ ​​​ ​

​