0

スクロール「サイドバー」を実装する方法を誰か教えてもらえますか

<div id="section">
    <div id="sidebar"> </div>
    <div id="hello"> </div>
</div>
<div id="footer"> </div>

Div 'section' には高さが設定されていません。つまり、hello の ID を持つ div が成長するたびに成長します。これは、「hello」も「section」も高さが設定されていないことを意味します

div 'section' の幅は 728、'hello' の幅は 400 です。'sidebar' の幅は 200 です。

私がしたいのは、（jqueryを使用して）人がサイドバーを少し過ぎてスクロールすると、サイドバーがページとともにスクロールすることです。ただし、サイドバーがフッターと重なってはいけません。

したがって、サイドバーは div セクションの最後までページと共にスクロールする必要があります。

赤いブロック (私のウェブサイト上) は、スクロールしたいサイドバーです。

4

1 に答える 1

1

次のようなもので始めることができます（テスト済みのCHROMEのみ）：http：//jsfiddle.net/MyFB9/3/

JS

var $sb = $('#sidebar'); 
var $foot = $('#footer');
var footerTop = $foot.offset().top;
$foot.html(footerTop);
$(document).scroll(function(){
    //+ 100 since the height of the sidebar is 100px

    if($(this).scrollTop() + 100 > footerTop){
        //when we get close, line up perfectly with the footer
        $sb.css({top:footerTop - 100}); 
    }else{
        //otherwise scroll with the page
        $sb.css({top:$(this).scrollTop()}); 
    }

    //Visualy display the position of the bottom edge of the sidebar
    $sb.html($sb.offset().top + 100)
});

HTML

<div id="section">
    <div id="sidebar"> </div>
    <div id="hello"> </div>
</div>
<div id="footer"> </div>​

CSS

#section{
 vertical-align:top;   
}
#sidebar, #hello{
 display:inline-block;
 position:relative;    
 vertical-align:top; 
 top:0px;
 left:0px;   
}
#sidebar{
 height:100px; 
 width:50px;
 background-color:red;   
}
#hello{
 height:900px; 
 width:50px;
 background-color:green;   
}
#footer{
 height:450px;
 width:100px;
 background-color:yellow;    
}
​
于 2012-06-07T02:51:48.663 に答える