---
title: "Fade ut en div när man scrollar mer än 100 px från toppen"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/186717-fade-ut-en-div-när-man-scrollar-mer-än-100-px-från-toppen"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "bikic"
published: "2011-04-21T07:06:43.000Z"
updated: "2011-04-21T09:00:52.000Z"
replies: 7
views: 489
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/186717-fade-ut-en-div-när-man-scrollar-mer-än-100-px-från-toppen"
---

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

## #1 — bikic, 2011-04-21T07:06Z

Hej!

Funderar på om det finns en funktion för detta. Om du är 100px från toppen så ska en div fadas ut. Sen när man är mindre än 100 pixlar från toppen så ska diven fadas in igen.

Går detta att lösa?

Permalänk: https://www.webforum.nu/p/186717

## #2 — bikic, 2011-04-21T07:21Z

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);
    		});
	});
```

Permalänk: https://www.webforum.nu/p/2274701

## #3 — voigtann1, 2011-04-21T08:37Z

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.

Permalänk: https://www.webforum.nu/p/2274706

## #4 — noshornin, 2011-04-21T08:40Z

> **[bikic skrev:](https://www.webforum.nu/p/1533591)**
>
> 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);
```

Permalänk: https://www.webforum.nu/p/2274707

## #5 — voigtann1, 2011-04-21T08:51Z

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?

Permalänk: https://www.webforum.nu/p/2274709

## #6 — bikic, 2011-04-21T08:52Z

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);
		}

	});
```

Permalänk: https://www.webforum.nu/p/2274711

## #7 — noshornin, 2011-04-21T08:57Z

```
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?

Permalänk: https://www.webforum.nu/p/2274712

## #8 — voigtann1, 2011-04-21T09:00Z

```
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 );
});
```

Permalänk: https://www.webforum.nu/p/2274713

---

Tråden på webben: https://www.webforum.nu/amne/javascript/186717-fade-ut-en-div-när-man-scrollar-mer-än-100-px-från-toppen