jquery - 如何在特定滚动位置或可见元素时为jQuery中的CSS“顶部”设置动画？

当窗口向下滚动时，我有一个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;
});

最佳答案

您需要在窗口上的滚动事件中添加一个附加条件：

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/