Как вызвать элемент для постепенного исчезновения, когда элемент виден?

Допустим, у меня есть div #this-div в нижнем колонтитуле.

HTML:

<footer>
    <div id="this-div">
    </div>
</footer>

CSS:

footer {
    background:black;
}

#this-div {
    height:50px;
    width:50px;
    background:red;
    margin:0 auto;
    display:none;
}

А затем я постепенно добавляю #this-div с помощью jQuery следующим образом:

$( document ).ready( function() {
$( '#this-div' ).fadeIn( 'slow' );
});

Но сейчас. Допустим, у меня много контента на моем веб-сайте, а нижний колонтитул находится на несколько прокруток вниз. Как я могу вызвать постепенное исчезновение, когда на экране отображается <footer>?

jsfiddle: http://jsfiddle.net/2ao1mfs9/


jquery fadein
person Alex    schedule 31.08.2015    source источник
comment
Для вашей анимации   -  person ODelibalta    schedule 31.08.2015
comment
можно использовать Waypoints google.de/search?q=waypoints.js?   -  person SuperVeetz    schedule 31.08.2015
comment
waypoints.js выглядит интересно. Но нет ли способа сделать это с помощью jQuery?   -  person Alex    schedule 31.08.2015
comment
После более внимательного изучения я, вероятно, сделаю это с помощью waypoint.js. Но я могу найти где угодно, какую лицензию использует waypoints.js?   -  person Alex    schedule 31.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Для этого вам нужно узнать offset вашего нижнего колонтитула следующим образом:

var footerTop = $('footer').offset().top;

Затем, когда область просмотра достигает этого расстояния от верхней части экрана при прокрутке пользователем, вы можете активировать свой эффект fadeIn как таковой:

$(window).scroll(function(){
    if($(this)).scrollTop() >= footerTop){ // adding a little more to the footerTop's value may give a better feeling.
        $( '#this-div' ).fadeIn( 'slow' );
    }
});
person Ahmad Baktash Hayeri    schedule 31.08.2015