Jak animować css "top" w jQuery w określonym miejscu przewijania lub gdy element jest widoczny?

Question

Mam ikonę scrolltotop, która pojawia się, gdy okno jest przewijane nieco w dół. Chodzi o to, kiedy okno jest przewijane na dół strony, które nakłada się na div, którego nie chcę.

Chciałbym zrobić to tak, aby górny pozycja scrolltotop dostaje animowane w górę tylko trochę, aby uniknąć kolizji z div, gdy okno jest przewijane całą drogę do dolnej

Oto co mam do tej pory: 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; 
}); 

Answer 1

Trzeba dodać dodatkowy warunek do zdarzenia przewijania w oknie:

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

Aby animacja gładkie tylko dodać: roboczego

.scrollToTop{ 
    transition: all .5s; 
} 

Fiddle: http://jsfiddle.net/qn6h9qad/5/

Answer 2

Spróbuj

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