tutorials.de Buch-Aktion 05/2012
Like Tree3Danke
  • 1 Beitrag von CPoly
  • 1 Beitrag von CPoly
  • 1 Beitrag von CPoly
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
638
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 25.09.11 15:01 #1
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Moin,
    wie bekomme ich es mit Hilfe von JQuery o.ä. hin, dass ich ein <div> welches standardmäßig mit display:none; eingestellt wurde, nach einer bestimmten Scrollposition (z.B. wenn der User 200px nach unten gescrollt hat) auf display:block; gesetzt wird? Wenn der User nach oben scrollt (also wieder in den Bereich 0-200 kommt) soll wieder die Eigenschaft display:none; eingestellt werden.

    Wäre Euch sehr dankbar!
     
    Zitieren Zitieren
  2. 25.09.11 17:52 #2
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Ich habe es nur im Firefox getestet, kann sein, dass du für den IE noch was ändern musst.

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>show onscroll</title>
	
	<style type="text/css">
	#foo {
		width:100px;
		height:100px;
		background:red;
		display:none;
	}
	</style>
</head>

<body>
	foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
	<div id="foo"></div>
	bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />
	
	<script type="text/javascript">
	/* <![CDATA[ */
	var foo = document.getElementById('foo');
	
	window.onscroll = function() {
		foo.style.display = ((window.pageYOffset || document.documentElement.scrollTop) > 200) ? 'block' : 'none';
	};
	/* ]]> */
	</script>
</body>

</html>
    Trash bedankt sich. 
    Zitieren Zitieren
  3. 25.09.11 19:23 #3
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Moin,
    vielen Dank schonmal! Geht das auch mit JQuery, damit ich mit animate() das Auftauchen und Verschwinden irgendwie "smooth" hinbekomme?

    Danke!
     
    Zitieren Zitieren
  4. 25.09.11 19:34 #4
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    jQuery ist JavaScript. Du kannst das praktisch 1zu1 übernehmen. Nur das Animieren braucht eine Spezialbehandlung.

    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13

    var $foo = $('#foo');
 
var $win = $(window).scroll(function() {
    if($win.scrollTop() > 200) {
        if(!$foo.is(':visible')) {
            $foo.stop(true, true).fadeIn();
        }
    } else {
        if(!$foo.is(':animated')) {
            $foo.stop(true, true).fadeOut();
        }
    }
});
    Trash bedankt sich. 
    Zitieren Zitieren
  5. 25.09.11 19:51 #5
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Moin,
    danke!

    Ich habe auch vor deinem Post dieses Beispiel gefunden:

    http://plugins.jquery.com/project/jStickyScroll

    und daraus dies hier gemacht:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <title>show onscroll</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
 
#your_div_id_here {
        position: fixed;
        left: 0;
        top: 0;
        height:20px;
        width: 200px;
        background-color: red;
        padding: 0;
        display:none;
}
    </style>
</head>
 
<body>
    <div id="your_div_id_here"></div>
    foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />
    bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />bar<br />
    
    <script>
    window.onscroll = function()
    {
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 175 || self.pageYOffset > 175) {
            $('#your_div_id').css('display','block');
        } else if (document.documentElement.scrollTop < 175 || self.pageYOffset < 175) {
            $('#your_div_id').css('display','none');
        }
    }
}
    </script>
</body>
 
</html>

    Kannst Du mir sagen warum das NICHT geht?
     
    Zitieren Zitieren
  6. 25.09.11 20:18 #6
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Weil "your_div_id_here" was anderes ist als "your_div_id"
    Trash bedankt sich. 
    Zitieren Zitieren
  7. 25.09.11 20:22 #7
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Oha. Da war ich aber richtig blind.

    Danke, jetzt funktioniert es, wie gewollt
     
    Zitieren Zitieren
« jQuery if-Abfrage | Formular Überprüfung »

Ähnliche Themen

  1. nach klick in checkbox element einblenden, nach reload der seite bei checked auch anz
    Von Maniac im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 10.08.10, 17:12
  2. Fragezettel der Reihe nach einblenden
    Von Browser-zocker im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 04.03.10, 19:52
  3. Div nach Zeit einblenden
    Von chaosgoettin im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 18.04.07, 19:08
  4. Div nach Zeit einblenden
    Von chaosgoettin im Forum CSS
    Antworten: 0
    Letzter Beitrag: 29.01.07, 15:51
  5. Link erst nach 30s einblenden
    Von Megamorph im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 07.04.06, 21:43