jquery - 固定菜单在底部直到某个点，然后在页面其余部分的顶部

Question

我有一个菜单，它保持相对，直到窗口顶部滚动到它，然后它从那里无缝固定，但小屏幕上的人看不到它，所以我需要一种方法让它固定在底部，直到它到达当前位于主图像下方的点(距窗口顶部 680 像素)，然后变为相对直到屏幕顶部再次碰到它(即已滚动 680 像素)并继续固定在顶部页面的其余部分，我当前使用的代码是；

$(window).load(function(){

$(window).scroll(function(e) {

if ($(window).scrollTop() > 680) { 

    $('.nav').css({

            position: 'fixed',

            top: '0'

        })

        $('body').css({

            margin: '105px 0px 0px 0px'

        });

    } else {

        $('.nav').css({

            position: 'relative'

        })

        $('body').css({

            margin: '0px 0px 0px 0px'

        });

    }

});
}); 

Answer 1

好的，这是您的解决方案:

$(window).scroll(function(e) {
    var scrollTop = $(window).scrollTop();

    $('body')
        .toggleClass('top', scrollTop > 1400)
        .toggleClass('visible', scrollTop <= 1400 && scrollTop > 1505 - $(window).height());
});

.nav {
    width:100%;
    height:105px;
    background:#333;
    bottom: 0;
    position: fixed;
}

.visible .nav {
    position: static;
}

.top .nav {
    bottom: auto;
    top: 0;
}

body.top {
    margin-top: 105px;
}

导航默认固定在底部。一旦超过 1400 像素，它就会到达顶部。当我们高于 1400 像素但低于 1400 像素加上导航高度(使 1505)减去窗口高度时，我们让导航滚动。这是一个工作 fiddle :http://jsfiddle.net/n4xvuk8j/4/