滚动框弹出

Question

试图弄清楚如何在页面底部添加一个div，当您到达页面底部时可以向上滚动。 我希望它隐藏起来，直到到达底部的div，我希望它到达时可以很好地向上滚动，而当我向上滚动时可以很好地向下滚动。

这就是我的开始：

 $(window).scroll(function(){ if( $(document).scrollTop() > ) { $('#signup').show(); } else { $('#signup').hide(); } }); 

 html { height: 2000px; } /* create a scrollbar for demo purposes */ #signup { position: fixed; top: 200px; right: 50px; display: none; background-color:purple; } 

 <div id="signup">Sign up!</div> 

但是我似乎真的无法弄清楚从这里去哪里，这甚至做得并不多。 TIA

Answer 1

您将需要检查scrollvalue + window height是否与document相同； 然后使用两个选项通过Jquery为框animate()或在CSS上使用transition ：

查看以下示例代码片段：

 $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) { $('#signup').addClass('show') } else { $('#signup').removeClass('show') } }); 

 body { height: 1000px; } /* create a scrollbar for demo purposes */ #signup { position: fixed; z-index:100; width: 100%; bottom: -50px; height: 50px; left: 0; background-color: purple; transition: bottom .5s linear; color: white; font-size: 2em; text-align: center } #signup.show { bottom: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="signup">Sign up!</div>