在窗口滚动条上显示/隐藏div [英] Show/hide div on window scroll

问题描述

我有一个div元素#btns，默认情况下是隐藏的.它应在从顶部滚动200px时显示，并在从顶部滚动500px之后再次隐藏.

I have a div element #btns that is hidden by default. It should be displayed on scrolling 200px from top and again hidden after 500px from top.

这是我的(无效)代码:

Here is my (non-working) code:

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

推荐答案

您可以添加一个隐藏在按钮中的类，如下所示:

You can add a class hide in button like this:

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

这篇关于在窗口滚动条上显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！