내부 div를 맨 아래로 스크롤 한 후 fixed로 변경하려면 어떻게해야합니까?

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이

그래서 위의 코드는 여기서 일하지 않지만이의 추가 설명이다 문제. 컨테이너라는 거대한 사업부가 있습니다. 그런 다음 오른쪽 사이드 바 "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)와 inner 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'}) 
     } 
}); 
​