Zniknij w div, gdy jest przewinięty do rzutni

Question

OK, więc szukałem sposobu na zejście w dziale, gdy użytkownik przewija widok, ale nie mogę znaleźć prostego rozwiązania.

HTML

<div class="container"> 

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div> 

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport. 
Let's use 150px as an example.</div> 

</div> 

CSS

.container { 
     width:100%; 
     height:600px; 
} 

.topdiv { 
     height:100%; 
     background-color:#09f; 
     text-align:center; 
     font-size:24px; 
} 

.fadethisdiv { 
     height:100%; 
     background-color:#36afff; 
     text-align:center; 
     font-size:24px; 
} 

JS

// Talk to me. 

Oto skrzypce: http://jsfiddle.net/kz2z5/2/

Answer 1

Oto rozwiązanie, które uruchamia funkcję jQuery fadeIn po przewinięciu przez element div .topdiv.

Odejmuje rozmiar obszaru wyświetlania od funkcji scrollTop, aby uzyskać najniższy punkt pozycji przewijania, a następnie sprawdza, czy jego wartość jest większa niż wysokość div .topdiv plus rozmiar 150 pikseli lub jak najdalej w dół. fadeIn na.

Ponieważ element div musi być początkowo wyświetlany na stronie, abyśmy mogli się przewinąć w dół, ustawiamy wartość visibility na zamiast używać display:none. Używamy fadeIn, który oczekuje element zacząć display:none, więc ukryć .fadethisdiv div i blaknięcie go.

Następnie usunąć słuchacza przewijania tak, że element nie stale ukrywać i fadeIn po mamy przewinął się obok elementu div .fadethisdiv.

$(window).scroll(function() { 
    console.log($(window).scrollTop()); 
    var topDivHeight = $(".topdiv").height(); 
    var viewPortSize = $(window).height(); 

    var triggerAt = 150; 
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt; 

    if ($(window).scrollTop() >= triggerHeight) { 
     $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn(); 
     $(this).off('scroll'); 
    } 
}); 

Fiddle

Answer 2

Tutaj jest rozwiązanie, jest ustawiony na rozmiar to 300

$(document).ready(function(){ 
var view = {}; 

var checkPosition = function(){ 
    var elem = $('.fadethisdiv'), top = elem.offset().top; 

       if (top - view.limit < 300) { 
        elem.css('display','none'); 
       } 
      }; 

     $(window).bind('scroll', function() { 

      view.top = $(window).scrollTop(); 
      view.limit = view.top + $(window).height(); 

      checkPosition(); 
     }); 

}); 

http://jsfiddle.net/kz2z5/4/

Enjoy! :)

Answer 3

Znalazłem bibliotekę AOS bardzo przydatne do tego celu (https://github.com/michalsnik/aos#-animations). Oprócz pojawiania się elementu div w oknie roboczym dostępne są inne efekty. Zobacz przykład poniżej:

<script src="js/aos.js"></script> 
<link href="css/aos.css" rel="stylesheet" /> 

<div id="content1" data-aos="flip-down" data-aos-delay="0"> 
    <p>Some content</p> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     AOS.init(); 
     AOS.refreshHard(); //optional 
    }); 
</script>