jQuery：自动滚动Div

时间：2012-06-07 00:25:54

标签： javascript jquery sidebar

任何人都可以告诉我如何在用户滚动页面后实现滚动“侧边栏”，但在到达“页脚”时停止

<div id="section">
    <div id="sidebar"> </div>
    <div id="hello"> </div>
</div>
<div id="footer"> </div>
Div'section'没有设定的高度，这意味着只要id为hello的div增长，它就会增长。这意味着'hello'和'section'都没有设定高度

Div'section'的宽度为728，'hello'的宽度为400.'sidebar'的宽度为200.

我想要发生的是（使用jquery）当此人稍微滚过侧边栏时，侧边栏应该与页面一起滚动。然而，侧边栏不应与页脚重叠。

因此，侧边栏应仅与页面一起滚动，直到div部分的末尾。

红色区块（在我的website上）是想要滚动的侧边栏。

1 个答案:

答案 0 :(得分：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;    
}
​
相关问题
最新问题