Fade ut en div när man scrollar mer än 100 px från toppen

Har hittat ett sätt, hur får jag den att fadas in igen d?

	
	twitterBird = $("#twitter");	

	$(window).scroll(function() {
    		twitterBird.each(function(i) {

        		a = $(this).offset().top + $(this).height();
        		b = $(window).scrollTop() + $(window).height();
        	
			if (a < b) $(this).fadeTo(500,0);
    		});
	});

else i din if fråga? eller kolla direkt om den skall fadeTo 0 eller 1:

$(this).fadeTo(500, a < b ? 0 : 1);

kanske?

Sen varför skall du köra en each? finns ju ingen anledning $("#twitter") är ju ändå ensam.

bikic skrev:

Har hittat ett sätt, hur får jag den att fadas in igen d?

	
	twitterBird = $("#twitter");	

	$(window).scroll(function() {
    		twitterBird.each(function(i) {

        		a = $(this).offset().top + $(this).height();
        		b = $(window).scrollTop() + $(window).height();
        	
			if (a < b) $(this).fadeTo(500,0);
    		});
	});

if (a > b) $(this).fadeIn(500);

Om det är din fågel på sidan så kolla bara om $(window).scrollTop() är 0 så skall den visas, annars skall den försvinna, gissar att det är det du är ute efter?

Jag fick löst det nu, kolla här:

http://web.ndesign.se

Men ju längre ner jag scrollar desto längre tid tar det för fågeln att fadas in igen.

twitterBird = $("#twitter");	

	$(window).scroll(function() {
    		
        	a = twitterBird.offset().top;
        	b = $(window).scrollTop();
        	
		if (b == 0) {
			twitterBird.fadeTo(500,1);
		} else {
			if (a > b) twitterBird.fadeTo(500,0);
		}

	});

if (b == 0) {
	$(this).fadeTo(500,1);
	fade_in=true;
} else  if(fade_in){
	if (a > b) $(this).fadeTo(500,0);
	fade_in=false;
}

Det blir ju en 500ms delay varje gång man scrollar. Men om du lägger in en boolean som gör att den bara fadas ut en gång så borde det jue funka?

var twitterBird = $("#twitter");

$(window).scroll(function() {
    if ($(this).scrollTop() === 0) {
        twitterBird.fadeIn(500).removeClass("hidden");
    } else if(!twitterBird.hasClass("hidden"))  {
        twitterBird.addClass("hidden").fadeOut(500);
    }
});

eller så rensar du animeringskön:

var twitterBird = $("#twitter");

$(window).scroll(function( ) {
    twitterBird.stop( ).fadeTo( 500, $(this).scrollTop() === 0 ? 1 : 0 );
});