的Javascript動畫上滾動位置

我試圖讓喜歡這裏滾動動畫（注意同心圓圖形衰落，當你向下滾動）： http://demo.atticthemes.com/skoty/的Javascript動畫上滾動位置

這是我SOFAR，但它一直莫名其妙地掛： 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); 
});

來源

2015-02-24 user2298943

你不需要使用計時器，你的方式已經實現了它會導致性能下降。
我會建議使用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 demo

或者，使用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;。

來源

2015-02-24 14:55:08

看起來你只是處理，你需要改變狀態（顯示或隱藏的元素）的情況下，而不是在那裏沒有什麼應該改變的情況下。這會導致您不斷重新顯示（重新創建）該事物，從而導致閃爍。

這是早，我還沒有咖啡，但是這樣的事情應該解決你。 :)

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/

來源

2015-02-24 14:53:15 brianvaughn

的Javascript動畫上滾動位置

回答

相關問題