DIV出現在向上滾動控制位置

Question

我有一個加載時顯示在屏幕底部的DIV欄，當用戶向下滾動時消失，而在用戶回到頂部時重新出現。 我想控制DIV在向上滾動時何時重新出現。 我怎樣才能做到這一點？

的HTML

<div id="bottom-cta">
  <a href="/join">Get Started!</a>
</div>

的CSS

#bottom-cta {
  background-color: #3bb618;
  text-align: center;
  padding: 11px 0 11px;
  text-transform: uppercase;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  height: 60px;
  transition: bottom 0.1s ease-in-out;
  -webkit-transition: bottom 0.1s ease-in-out;
  -moz-transition: bottom 0.1s ease-in-out;
  -ms-transition: bottom 0.1s ease-in-out;
  -otransition: bottom 0.1s ease-in-out;
}
#bottom-cta a {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: inline-block;
}

jQuery的

var $element = $('#bottom-cta');

$(window).scroll(function() {

if($(this).scrollTop() > 0) {
    $element.fadeOut();
} else {
    $element.fadeIn();
}
});

小提琴

http://jsfiddle.net/6usogk7z/

Answer 1

您可以將window的當前滾動位置存儲在變量中，並檢查window滾動時滾動位置是否大於（滾動用戶時）以隱藏頁腳，否則顯示頁腳（因為用戶已經向上滾動）。

 var $element = $('#bottom-cta'); var prevYPos = $(window).scrollTop();//current window scroll position $(window).scroll(function() { var currentYPos = $(this).scrollTop(); if(currentYPos > prevYPos) { $element.fadeOut(); } else { $element.fadeIn(0); } prevYPos = currentYPos;//set the previous scroll position to the scroll position when the window is scrolled }); 

 #bottom-cta { background-color: #3bb618; text-align: center; padding: 11px 0 11px; text-transform: uppercase; position: fixed; bottom: 0; width: 100%; z-index: 9999; height: 60px; transition: bottom 0.1s ease-in-out; } #bottom-cta a { color: #fff; font-size: 28px; font-weight: 700; display: inline-block; } body { height: 2000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bottom-cta"> <a href="/join">Get Started!</a> </div>