Objekt-Sichtbarkeit bei Erhöhung der Höhe beibehalten

So beheben Sie die Sichtbarkeit von Objekten auf der Höhe-Bildlaufleiste.Objekt-Sichtbarkeit bei Erhöhung der Höhe beibehalten

Ich habe den folgenden Code unter dem die Höhe des Div basierend auf Benutzer scroll wächst. Wenn Sie nach unten scrollen, wird das Spinnenbild unsichtbar.

$(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 Beispiel hier ist: https://jsfiddle.net/ppw9z6y2/

Quelle

2016-10-18 Mr.Dev

Frage: die Web-Linie eine „verzögerte“ Animation hat (zumindest von dem, was ich sehe) - das ist animiert gehalten werden, wie es ist? –

@alexwc_ ja wie möglich. –

Sie CSS-Übergänge für die Animation verwenden können, und die Höhe nur durch Javascript ändern:

.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

Mit Blick y unser Beispiel, ich denke, Sie wollen die Spinne zu bewegen, nachdem die Schriftrolle beendet haben, also wenn das der Fall ist, überprüfen Sie dies: jQuery scroll() detect when user stops scrolling

Quelle

2016-10-18 04:51:25 hector22x

schön Ich versuche nur die Übergangshöhe auf 1000ms zu erhöhen, um den verzögerten Effekt zu erreichen. –

Ich habe gerade damit gespielt – hector22x

Versuchen die Spinne außerhalb seiner Mutter div bewegen und ihm eine feste Position in der unteren Ecke zu geben; Es sollte dort bleiben, unabhängig vom Scrollen. (Möglicherweise müssen Sie das Verhalten der Rolle/Web-Linie zwicken rechts schauen.)

Quelle

2016-10-18 04:21:30 jack

Ich denke du hast es nicht verstanden. Der Spider bewegt sich basierend auf dem scrollheight-Wert nach unten, der auf das Eltern-div angewendet wird, das 1-x-border-right hat, um die Spinnennetzlinie anzuzeigen. Das Problem ist, dass die Objektspinne unsichtbar wird, wenn die Elternteilhöhe zunimmt. –

Das gleiche wie hector22x. Erhöhen Sie die Dauer auf 100 ms und fügen Sie eine Verzögerung von 100 ms hinzu, um den Übergang reibungslos zu gestalten.

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>

Quelle

2016-10-18 05:04:03

Objekt-Sichtbarkeit bei Erhöhung der Höhe beibehalten

Antwort

Verwandte Themen