Question

我的div标记中有以下脚本，当窗口距离底部150px时，它会为我的<script> $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()-150){ isShown = true; $('.footer-btn').fadeIn(500); }else{ $('.footer-btn').fadeOut(500); } }); </script>设置动画。我不知道如何改变它，以便在距离顶部一定距离时动画。

set /a Used=%Size% - %Free%
set /a Percentage=100 * %Used% / %Size%

Answer 1

这是我在网站中使用的jQuery脚本，用于从顶部设置动画。

更改offset()的值以控制淡入启动位置。

＆＃13;

jQuery(document).ready(function($) {

  // browser window scroll position (in pixels) where button will appear
  // adjust this number to select when your button appears on scroll-down
  var offset = 200,

    // duration of the animation (in ms)
    scroll_top_duration = 700,

    // bind with the button link
    $animation = $('.animation');

  // display or hide the button
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $animation.addClass('visible'):
      $animation.removeClass('visible');
  });

});

＆＃13;

#container {
  height: 800px;
}
#button {
  border: 1px solid black;
  padding: 10px;
  width: 100px;
  text-align: center;
  background-color: chartreuse;
}
.animation {
  position: fixed;
  bottom: 25px;
  right: 25px;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.visible {
  visibility: visible;  /* the button becomes visible */
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>SCROLL DOWN</p>
  <a id="button" class="animation">BUTTON</a>
</div>

＆＃13;

http://jsfiddle.net/zmz6g8kh/4/

当窗口从顶部滚动一定距离时，div淡入

1 个答案: