如何在某个滚动位置或元素可见时在jQuery中设置css’top’?

前端之家收集整理的这篇文章主要介绍了如何在某个滚动位置或元素可见时在jQuery中设置css’top’?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当窗口向下滚动时,会出现一个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/

猜你在找的jQuery相关文章