javascript - 在高度增加时保持物体可见性

Question

如何修复对象在高度滚动时的可见性。

我有下面的代码，它根据用户滚动增加 div 的高度。当您向下滚动时，蜘蛛图像变得不可见。

    $(window).scroll(function() {
      var bh = 100;
      var height = $(window).scrollTop();
      var sch = bh + height;

      $('.webscroll').stop().animate({
        'height': sch
      }, 400)
      if (height <= 19) {
        $('.webscroll').stop().animate({
          'height': 200
        }, 600)
      }
    });

body {
  background-color: #000;
  height: 1200px;
}
.bottom_left_spider {
  position: absolute;
  width: 180px;
  height: 200px;
  left: 0;
  top: 0;
  z-index: 998
}
.webscroll {
  height: 200px;
  width: 1px;
  border-right: 2px solid #2e2e2e;
  position: absolute;
  top: 0;
  left: 101px;
  z-index: 9999
}
.spidy {
  position: absolute;
  bottom: -51px;
  left: -29px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
  <img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
  <!-- spider web lines -->

  <div class="webscroll">
    <!-- spider line vertical -->
    <img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
    <!-- spider image -->
  </div>
</div>

这里是一个可用的 jsfiddle 示例:https://jsfiddle.net/ppw9z6y2/

Answer 1

您可以为动画使用 css 转换，只需通过 javascript 更改高度:

.webscroll {
    ...
    transition: height 50ms ease-in-out
}

var $webscroll = $('.webscroll')[0];
$(window).scroll(function() {
      var bh = 100; 
      var height = window.scrollY;
      var sch = bh + height;

      
      if (height <= 19) {
        $webscroll.style.height = '200px';
      } else {
        $webscroll.style.height = sch + 'px';
      }
    });

body {
  background-color: #000;
  height: 1200px;
}
.bottom_left_spider {
  position: absolute;
  width: 180px;
  height: 200px;
  left: 0;
  top: 0;
  z-index: 998
}
.webscroll {
  
  height: 200px;
  width: 1px;
  border-right: 2px solid #2e2e2e;
  position: absolute;
  top: 0;
  left: 101px;
  z-index: 9999;
  transition: height 50ms ease-in-out

}
.spidy {
  position: absolute;
  bottom: -51px;
  left: -29px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bottom_left_spider">
  <img src="https://s17.postimg.org/cc243pkrz/spiderweb.png">
  <!-- spider web lines -->

  <div class="webscroll">
    <!-- spider line vertical -->
    <img src="https://s21.postimg.org/tbdww9hzr/spidy.png" class="spidy">
    <!-- spider image -->
  </div>
</div>

http://caniuse.com/#feat=css-transitions https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

通过查看您的示例，我认为您希望蜘蛛在滚动结束后开始移动，所以如果是这种情况，请检查:jQuery scroll() detect when user stops scrolling