JavaScript在滾動位置上動畫

Question

我正在嘗試獲得一個像這樣的滾動動畫（注意，向下滾動時，圓圈圖形會逐漸消失）： http : //demo.atticthemes.com/skoty/

這是我的沙發，但是它以某種方式一直掛着： http : //jsfiddle.net/v4zjgwL6/

var timer;
var triggerHeight = $("#bar").offset().top;
var headerAvatar = $(".header-avatar-wrapper");

$(window).scroll(function() {
    if(timer) {
        window.clearTimeout(timer);
    }

    timer = window.setTimeout(function() {
        var y = $(window).scrollTop();

        if(y > triggerHeight - 220) {
            headerAvatar.css("visibility", "visible");
            headerAvatar.animate({opacity: 1}, 200);
        } else {
            headerAvatar.animate({opacity: 0}, 200);
            headerAvatar.css("visibility", "hidden");
        }

    }, 10);
});

Answer 1

看起來您只在處理需要更改狀態（顯示或隱藏元素）的情況，而不在處理什么都不應更改的情況。 這使您不斷重新顯示（重新設置動畫）該事物，從而使其閃爍。

時間還早，我還沒有喝咖啡，但是這樣的事情應該可以解決您的問題。 :)

var timer;
var triggerHeight = $("#bar").offset().top;
var headerAvatar = $(".header-avatar-wrapper");
var shown; // NEW

$(window).scroll(function() {
    if(timer) {
        window.clearTimeout(timer);
    }

    timer = window.setTimeout(function() {
        var y = $(window).scrollTop();
        var shouldShow = y > triggerHeight - 220; // CHANGED

        if(!shown && shouldShow) { // CHANGED
            shown = true; // NEW
            headerAvatar.css("visibility", "visible");
            headerAvatar.animate({opacity: 1}, 200);
        } else if (shown && !shouldShow) { // CHANGED
            shown = false; // NEW
            headerAvatar.animate({opacity: 0}, 200);
            headerAvatar.css("visibility", "hidden");
        }

    }, 10); });

證明： http ： //jsfiddle.net/bvaughn/oL85oj41/

Answer 2

您不需要使用計時器，因為它的實現方式會導致性能下降。
我建議改用CSS類：

var triggerHeight = $("#bar").offset().top;
var headerAvatar = $(".header-avatar-wrapper");

$(window).scroll(function() {
    var y = $(window).scrollTop();

    if (y > triggerHeight - 220 && !headerAvatar.hasClass("visible")) {
        headerAvatar.addClass("visible");
    } else if(y <= triggerHeight - 220 && headerAvatar.hasClass("visible")) {
        headerAvatar.removeClass("visible");
    }
});

我還在CSS中添加了此類：

.header-avatar-wrapper.visible{
    opacity: 1;
    visibility: visible;
}

JSFiddle演示

---

或者，使用jQuery的.fadeIn()和fadeOut()函數：

var triggerHeight = $("#bar").offset().top;
var headerAvatar = $(".header-avatar-wrapper");

$(window).scroll(function() {
    var y = $(window).scrollTop();

    if (y > triggerHeight - 220 && headerAvatar.css("display") == "none") {
        headerAvatar.fadeIn();
    } else if(y <= triggerHeight - 220 && headerAvatar.css("display") == "block") {
        headerAvatar.fadeOut();
    }
});

在CSS中，我從.header-avatar-wrapper刪除了opacity和visibility屬性，並添加了display: none; 代替。

JSFiddle演示