滚动框

Question

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

这就是我要开始的：

＆＃13;

＆＃13;

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

＆＃13;

html { height: 2000px; } /* create a scrollbar for demo purposes */

#signup {
    position: fixed;
    top: 200px;
    right: 50px;
    display: none;
  background-color:purple;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我似乎无法弄清楚从哪里开始，这甚至都做不了多少。 TIA

Answer 1

您需要检查scrollvalue + window height是否与document相同;然后使用Jquery为框animate()设置动画或在CSS上使用transition两个选项：

检查此示例代码段：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;