滾動到底部時，如何將內部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更改爲固定？

回答

相關問題