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

我有一个div内的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;*/ 
}

来源

2012-07-13 Daniel Fein

你尝试过什么？ – grc 2012-07-13 02:41:58

重复的问题http://stackoverflow.com/questions/5609255/javascript-jquery-perform-function-when-user-scrolls-near-bottom-of-page – 2012-07-13 02:53:50

刚刚更新了我所尝试过的！ – 2012-07-13 02:59:59

基于你所问的我已经创建了一个外部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'}) 
     } 
});

来源

2012-07-13 03:09:03

对不起，我想这个问题需要解决。我希望他们同时滚动（当你向下滚动页面时），但是一个会在另一个之前到达它的末端，当那个到达最后，我希望它然后变得固定。这有帮助吗？ – 2012-07-13 03:15:04

等待，你想同时滚动两个div的内容？ – 2012-07-13 03:16:24

是的，然后当你到达其中一个的底部时，它就变得固定了，另一个继续滚动。 – 2012-07-13 03:18:52

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

回答

相关问题