Maintain object visibility on height increase

Question

How to fix object visibility on height scroll.

I have the following code below which grows height of the div based on user scroll. When you scroll down the spider image become invisible.

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

A woking jsfiddle sample is here: https://jsfiddle.net/ppw9z6y2/

question: the web line has a "delayed" animation (at least from what I'm seeing) - that is to be kept animated as it is? — alexwc_, Oct 18 '16 at 04:51

score 0 · Answer 1 · answered Oct 18 '16 at 04:21

0

Try moving the spider outside of its parent div and giving it a fixed position in the bottom corner; it should stay there regardless of scrolling. (You may need to tweak the behavior of the scroll/web line to look right.)

answered Oct 18 '16 at 04:21

jack

2,894
1
13
23

1

I think you didn't get the point. the Spider moves down based on scrollheight value which is applied on the parent div that has border-right 1px to display the spider web line. The problem is the object spider become invisible when the parent div height increases. – Brian Luna Oct 18 '16 at 04:27

score 0 · Accepted Answer · edited May 23 '17 at 10:32

You can use css transitions for the animation, and just change the height by 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

By looking your example, I think you want the spider to start moving after the scroll have ended, so if that's the case, check this: jQuery scroll() detect when user stops scrolling

nice I just try increasing the transition height to 1000ms to achieve the delayed effect. — Brian Luna, Oct 18 '16 at 05:03

score 0 · Answer 3 · answered Oct 18 '16 at 05:04

Same as hector22x. Increasing the duration to 100ms and add a 100ms delay to make it move smoothly.

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

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

Maintain object visibility on height increase

3 Answers3