高さ増加時のオブジェクトの視認性を維持する

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トランジションを使用して、ちょうどジャバスクリプトによって高さを変更することができます。

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

探してYで

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 2

は、親のdivの外にクモを移動し、それを下の隅にある固定位置を与えてみてください。それはスクロールに関係なくそこにとどまるべきです。 （あなたは右見てスクロール/ウェブラインの振る舞いを調整する必要があるかもしれません。）

Answer 3

ヘクター22xと同じです。時間を100msに増やし、100msの遅延を加えてスムーズに動かせるようにします。

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>