根据滚动位置固定切换位置 [英] Toggle position fixed depending on scroll position

问题描述

我有以下代码可以修复菜单在页面顶部滚动的位置。

I have the following code which fixes the position of a menu at the point that it is going to scroll off the top of the page.

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

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

What I now want to do is make it start scrolling again when the user reaches the bottom of the page (so that it does not cover the footer in the page).

jsfiddle here ...

推荐答案

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中：

If you want the menu to simply stay where it is when it reaches the footer you'll need to add more logic to append it into the 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/

I'm sure there's a more elegant way to do this. Play around :) http://jsfiddle.net/AlienWebguy/CV3UA/2/

这篇关于根据滚动位置固定切换位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！