jquery - 到达页面底部时停止侧边栏滚动

Question

我在一个有粘性侧边栏的网站上工作。侧边栏只会固定在滚动窗口上。

问题是，当我向下滚动窗口并到达页面底部时，侧边栏将与页脚重叠，因为侧边栏是固定的。

我希望，当用户到达页面底部时，侧边栏停止滚动，如果用户正在滚动页面顶部，它应该再次开始滚动。

您可以在下面查看我的代码，或者您可以查看 fiddle here .

脚本

<script>
$(window).scroll(function(){

        var contPos = $('.sidebar').offset().top;       

        var containerHeight = $('.container').height();

        var heightOfWindow = $('body').height();            
        var topOfWindow = $(window).scrollTop();

            if (contPos < topOfWindow) {
                $('.sidebar').css('margin-top',''+topOfWindow+'px');

            }
    }); 


</script>

HTML

<div class="header">Header</div>
<div class="sidebar">asd</div>
<div class="container">Contaier</div>
<div class="footer">Footer</div>

CSS

.header{height:100px; text-align:center; font-size:35px; color:#000; background:#999;}
.container{overflow:auto; padding:15px; background:#CCC; height:1000px; margin:0 0 0 300px;}
.sidebar{width:300px; height:700px; float:left; background:red;}
.footer{height:100px; text-align:center; font-size:35px; color:#000; background:#999;}

Answer 1

我想您必须编写一个 JS 代码来检测边栏是在页面的顶部、底部还是中间。然后你可以设置一个特定的 css 类“bottom”，“top”，.. 并在 fixed/absolute 之间设置正确的位置。

这是我的做法:

http://jsfiddle.net/w6G7Z/1/