切换位置根据滚动位置固定

我有以下代码，它修复了菜单将要滚动到页面顶部的位置。

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;
    if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
    $('.menu').addClass('fixed');
    } else {
    $('.menu').removeClass('fixed');
    }
    });
    }
}); 

css

.container {
    width:400px; 
    margin:auto;
}

.header {
    background-color:#096; 
    height:150px;
}

.fixed {
    position:fixed;
    top:0px;
    left:50%;
    margin-left:50px;
}

.bodyContainer {
    overflow:hidden;
}

.menu {
    float:right; 
    width:150px; 
    height:250px; 
    background-color:#F00;
}

.bodyCopy {
    float:left; 
    width:250px; 
    height:1000px;
}

.footer {
    background-color:#096; 
    height:250px;
}

HTML

<div class="container">

<div class="header">
    <p>Test Header</p>
</div>

<div class="bodyContainer">

    <div class="menu">
        <p>test</p>
    </div>

    <div class="bodyCopy">
        <p>test</p>
    </div>

</div>


<div class="footer">
    <p>Test Footer</p>
</div>

我现在想做的是当用户到达页面底部时让它再次开始滚动（这样它就不会覆盖页面中的页脚）。

jsfiddle在这里...

这是 css3 的新方法。

use position:sticky跟随滚动。

这里是文章的解释。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

和这样做的旧方法demo

with 粘性位置演示