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

Question

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

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

＆＃13;

＆＃13;

    $(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)
      }
    });

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

woking jsfiddle示例在这里：https://jsfiddle.net/ppw9z6y2/

Answer 1

尝试将蜘蛛移到其父div之外，并在底角给它一个固定的位置;它应该留在那里，无论滚动。 （您可能需要调整滚动/网络线的行为才能看起来正确。）

Answer 2

您可以为动画使用css过渡，只需通过javascript更改高度：

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

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

与hector22x相同。将持续时间增加到100毫秒并添加100毫秒的延迟以使其平稳移动。

＆＃13;

＆＃13;

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

＆＃13;

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 100ms ease-in-out 100ms

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;