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

Question

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

$(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 ...

Answer 1

这是css3的新方法.

使用position:sticky以遵循滚动.

这是文章解释.

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

这个演示的老方法

与粘性位置演示