如何在某个滚动位置或元素可见时在jQuery中为css"top"设置动画？

Question

我有一个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;
});

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