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

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');
    }
    });
    }
}); 

我现在想做的是当用户到达页面

.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;
}

。

<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

和执行此操作的旧方法 演示

与 粘性位置演示

Answer 2

var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
var _height = $('.menu').height();
$(window).scroll(function(event) {
    var y = $(this).scrollTop();
    var z = $('.footer').offset().top;
    if (y >= top && (y+_height) < z) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

http://jsfiddle.net/AlienWebguy/CV3UA/1/

如果您希望菜单当它到达页脚时，只需保留它所在的位置，您需要添加更多逻辑将其附加到 DOM 中：

var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
    var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0));
    var _height = $('.menu').height();
    var _original_top = $('.menu').offset().top;
    $(window).scroll(function(event) {
        var y = $(this).scrollTop();
        var z = $('.footer').offset().top;
        if (y >= top && (y + _height) < z) {
            $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').addClass('fixed');
        } else {
            if ((y + _height) >= z) {
                $('#menu').insertBefore($('.footer')).removeClass('fixed').addClass('stuck-bottom');
            }
            else $('.menu').insertBefore($('.bodyCopy')).removeClass('stuck-bottom').removeClass('fixed');
        }
    });
}

我确信有一种更优雅的方法可以做到这一点。玩玩:)
http://jsfiddle.net/AlienWebguy/CV3UA/2/