的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动画上滚动位置

回答

相关问题