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

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

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

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

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

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