javascript - JQuery fadeIn 向下滚动

Question

我有一个网页，如果您向下滚动超过 175 像素，就会出现“返回顶部”框，以便您可以滚动回到顶部 eaiser。

为此，我将“BackToTop”的 div 设置为“Visibility:hidden”，这样它就不会在页面加载时显示在网站上，因为您已经位于页面顶部。

然后，一旦您滚动超过 175 像素，“BackToTop”div 就会淡入。

只是没有。它首先立即出现，然后淡出，然后在第一次加载时再次淡入。在此之后，它可以正常运行。

有人对如何纠正有任何想法吗？

JS fiddle : http://jsfiddle.net/AuLFR/1/

HTML:

<div id="BackToTop">Back To Top</div>

CSS:

html {
    height:1000px;
}
#BackToTop {
    border-radius:10px;
    padding:5px;
    background-color:#ccc;
    display:block;
    visibility:hidden;
    position:fixed;
    top:10px;
    text-align:center;
    width:120px;
    left: 50%;
    margin-left:-60px;
}

JavaScript:

$(window).scroll(function () {
    if ($(this).scrollTop() > 175) {
        $('#BackToTop').css({
            'visibility': 'visible'
        });

        $("#BackToTop").fadeIn("slow", function () {});

    } else {
        //  $('#BackToTop').css({'visibility': 'hidden'});
        $("#BackToTop").fadeOut("slow", function () {});
    }

});

Answer 1

如果你想让它褪色，你应该改变不透明度属性，而不是可见性；此外，在 scoll 事件处理程序之外定义您的 jQuery 对象，否则它可能会变得昂贵。

http://jsfiddle.net/AuLFR/3/

HTML

<div id="BackToTop">Back To Top</div>

JS

var $back_to_top = $('#BackToTop');

$(window).on('scroll', function () {

  if (window.scrollY > 175) {

    $back_to_top.addClass('active');

  } else {

    $back_to_top.removeClass('active');

  }

});

CSS

html {
    height:1000px;
}
#BackToTop {
    border-radius:10px;
    padding:5px;
    background-color:#ccc;
    display:block;
    position:fixed;
    top:10px;
    text-align:center;
    width:120px;
    left: 50%;
    margin-left:-60px;
    opacity: 0;
    transition-duration: 600ms;
}
#BackToTop.active {
    opacity: 1;
}