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）减去窗口高度时，我们让导航滚动。这是一个工作小提琴：http://jsfiddle.net/n4xvuk8j/4/

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

1 个答案: