Question

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

所以为了做到这一点，我将“BackToTop”的div设置为“Visibility：hidden”，这样它就不会在页面加载时显示在网站上，因为你已经位于页面的顶部。

然后，当您滚动超过175px时，“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;
}

Answer 2

Demo

使用display:none作为fadeIn/Out work not not visibility属性。

 $('#BackToTop').css({
    'visibility': 'visible'
 });

上面的.css()代码会快速更改元素的可见性。

#BackToTop {

    display:none
}

Answer 3

这是一个小提琴：http://jsfiddle.net/AuLFR/6/

我检查了你的css prop以确定它是否可见，然后尝试使用它隐藏它：

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

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

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

});

向下滚动JQuery淡入淡出

3 个答案:

Demo