在窗口滚动上显示/隐藏div

时间:2016-07-24 12:42:11

标签: javascript jquery scroll hide show

我有一个默认隐藏的div元素#btns。它应该在从顶部滚动200px时显示,并在500px之后从顶部再次隐藏。

这是我的(非工作)代码:

$(window).scroll(function() {
    if ($(this).scrollTop()>200) {
        $('#btns').fadeIn();
    } 
    elseif ($(this).scrollTop()<500) {
        $('#btns').fadeIn();
    } else {
        $('#btns').fadeOut();
    }
});

1 个答案:

答案 0 :(得分:1)

您可以在按钮中添加类隐藏,如下所示:

$(function() {
    $(window).scroll(function() {
        console.log('scrolling ', $(window).scrollTop(), $(document).height());
        if($(window).scrollTop() >= 200 && $(window).scrollTop() <= ($(document).height() - 500)) {
            $('#btns').removeClass('hide');
        } else {
            $('#btns').addClass('hide');
        }
    });
});

DEMO https://jsfiddle.net/1ks8at6r/5/