0

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

1 に答える 1

0

あなたが尋ねたことに基づいて、私は外側の div ( #outer) と内側の div ( ) を作成しまし#innerた。

それは最も原始的な形で、あなたが求めていることをやったと思います（ただし、質問が何であるかは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'})
         }
});
​

</p>

</p>

于 2012-07-13T03:09:03.717 に答える