✔ DIV nach bestimmter Scrollposition einblenden

T

Trash

Erfahrenes Mitglied
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!
 
Ich habe es nur im Firefox getestet, kann sein, dass du für den IE noch was ändern musst.

HTML: 
<!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>
 
Moin,
vielen Dank schonmal! Geht das auch mit JQuery, damit ich mit animate() das Auftauchen und Verschwinden irgendwie "smooth" hinbekomme?

Danke!
 
jQuery ist JavaScript. Du kannst das praktisch 1zu1 übernehmen. Nur das Animieren braucht eine Spezialbehandlung.

Javascript: 
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();
		}
	}
});
 
Moin,
danke!

Ich habe auch vor deinem Post dieses Beispiel gefunden:

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

und daraus dies hier gemacht:

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>
	<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?
 
Hallo,
ich benutze folgenden Code:
  1. <script type="text/javascript">
  2. document.getElementById('menu');
  3. window.onscroll = function() {
  4. menu.style.backgroundColor = ((window.pageYOffset || document.documentElement.scrollTop) > 100) ? 'transparent' : 'black';
  5. };
  6. </script>
Funktioniert auch soweit, allerdings beim "hoch" scrollen, wird die Hintergrundfarbe nicht transparent.
Hat vielleicht jemand eine Idee ? :)
 
Die backgroundColor-Angaben müssten lediglich getauscht werden:
Javascript: 
menu.style.backgroundColor = ((window.pageYOffset || document.documentElement.scrollTop) > 100) ? 'black' : 'transparent';
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück