Как оживить css 'top' в jQuery в определенном месте прокрутки или когда элемент видим?

У меня есть значок scrolltotop, который появляется, когда окно немного прокручивается. Дело в том, что окно прокручивается в нижней части страницы, оно перекрывает div, который я не хочу.

Я хотел бы сделать так, чтобы верхняя позиция scrolltotop немного анимировалась вверх, чтобы избежать столкновения с div, когда окно прокручивается до конца.

Вот что я до сих пор: https://jsfiddle.net/qn6h9qad/

JQuery

    //Scroll to top animate in
$(window).scroll(function(){
    if ($(this).scrollTop() < 300) {
        $('.scrollToTop').fadeOut(1000).css({right:-70});

    } else {
        $('.scrollToTop').fadeIn(1000).css({right:20});
    }
});

//Click event to scroll to top
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1000);
    return false;
});

Ответ 1

Вам нужно добавить дополнительное условие для события прокрутки в окне:

if(($(this).scrollTop() + $(this).height()) > $('.projnav').position().top){
    $('.scrollToTop').css(bottom, 40);
}
else{
    $('.scrollToTop').css(bottom, 20);
}

Чтобы сделать анимацию гладкой, просто добавьте:

.scrollToTop{
    transition: all .5s;
}

Работа скрипта: http://jsfiddle.net/qn6h9qad/5/

Ответ 2

Try

//Scroll to top animate in
$(window).scroll(function(){
    if ($(this).scrollTop() < 300) {
        $('.scrollToTop').stop(true, true).fadeOut(1000)
        .css({right:-70, bottom:"20px"});

    } else {
        $('.scrollToTop').fadeIn(1000)
        .css({right:20, bottom:"40px"});
    }
});

//Click event to scroll to top
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},1000);
    return false;
});

jsfiddle https://jsfiddle.net/qn6h9qad/4/