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'})
         }
});

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

1 个答案: