根據滾動位置固定切換位置

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

這個演示的老方法

與粘性位置演示

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/