Bei scrollen mit jQuery Element fixen funktioniert nicht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

20:53, 22.11.2013

Ich versuche ein HTML-Dokument zu erstellen, welches eine <div> besitzt, die beim hinabscrollen per jQuery fixed werden soll. Es funktioniert aber leider nicht.

Hier der Code:

index.html:

<!DOCTYPE html>
<html>
<head>
	<title>Testseite1</title>
	<link type="text/css" href="index.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" />
	<script>
		$(document).ready(function () { 
			var top = $('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
			$(window).scroll(function (event) {
				var y = $(this).scrollTop();
				if (y >= top) {
					$('#nav').addClass('fixed');
				} else {
					$('#nav').removeClass('fixed');
				}
			});
		});
	</script>
</head>
<body>
	<div class="header">
		<ul id="nav" class="">
			<li><a href="#">Startseite</a></li>
			<li><a href="#">Kategorie1</a></li>
			<li><a href="#">Kategorie2</a></li>
			<li><a href="#">Kategorie3</a></li>
			<li><a href="#">Forum</a></li>
			<li><a href="#">Benutzer</a></li>
		</ul>
	</div>
	<div class="body">
	</div>
</body>
</html>

Das script ist von: http://jqueryfordesigners.com/fixed-floating-elements/

index.css:

body {
	font-family: arial;
	margin: -16px 0 -16px -41px;

}
li{

}
/*header*/
div.header  {
	height: 294px;
	background-image: url(background.jpg);
}

#nav {
	background-image: -webkit-gradient(
		linear, right top, right bottom, 
		color-stop(0, rgba(00,00,0,0)), 
		color-stop(0.9, rgba(00,55,99,1))
	);
	position: absolute;
	height: 40px;
	top: 224px;
	width: 100%;
}
#nav li {
	opacity: 0.7;
	list-style-type: none;
	text-align: center;
	float: left;
}
#nav li:hover {
	background-image: -webkit-gradient(
		linear, right top, right bottom, 
		color-stop(0, rgba(00,00,0,0)), 
		color-stop(0.9, rgba(00,55,99,1))
	);
}
#nav li {
	line-height: 40px;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: rgba(255, 255, 255, 0.2);
}
#nav li a {
	padding: 11px 20px 11px 20px;
	text-decoration: none;
	color: white;
}
#nav.fixed {
	top: -18px;
	position: fixed;
	background-color: rgba(00,55,99,1);
}
#nav.fixed > li:hover {
	background-image: -webkit-gradient(
		linear, right top, right bottom, 
		color-stop(0.1, rgba(00,00,0,0.4)), 
		color-stop(0.9, rgba(00,55,99,1))
	);
}
/*body*/
div.body {
	padding: 60px 40px 60px 80px;
	text-align: justify;
}

Bitte um Hilfe und danke im Voraus.
lg Lucaniatech

/edit by daswing: Link angepasst

Beitrag zuletzt geändert: 22.11.2013 22:07:24 von daswing

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

daswing

Moderator

daswing hat kostenlosen Webspace.

22:19, 22.11.2013

Hallo lucaniatech,

dein Fehler lag einfach nur in der Einbindung des Javascripts begraben. Beende in Zeile 6 deiner

index.html

den Ausdruck mit

</script>

Die ganze Zeile sollte dann so aussehen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>

Das du auch sieht das es auch funktioniert habe ich dein Beispiel einfach mal bei mir hoch geladen, so kannst du es auch gleich nochmal ausprobieren: http://daswing.lima-city.de/lima-test-div-scroll/

Edit: Außerdem solltest du deinen direkten Javascript Code lieber mit

<script type="text/javascript" ></script>

einbinden. So sollte deine ganze

index.html

aussehen:

<!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">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8"></meta>
    <title>Testseite1</title>
    <link type="text/css" href="index.css" rel="stylesheet"></link>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>
    <script type="text/javascript" >   
        $(document).ready(function () {
            var top = $('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
            $(window).scroll(function (event) {
                var y = $(this).scrollTop();
                if (y >= top) {
                    $('#nav').addClass('fixed');
                } else {
                    $('#nav').removeClass('fixed');
                }
            });
        });
    </script>
</head>
<body>
    <div class="header">
        <ul id="nav" class="">
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Kategorie1</a></li>
            <li><a href="#">Kategorie2</a></li>
            <li><a href="#">Kategorie3</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Benutzer</a></li>
        </ul>
    </div>
    <div class="body">
    </div>
</body>
</html>

MfG daswing

Beitrag zuletzt geändert: 22.11.2013 22:36:28 von daswing

Autor dieses Themas
lucaniatech

lucaniatech hat kostenlosen Webspace.

20:10, 23.11.2013
Danke für den Tipp. Ich habe gedacht, die Kurzform funktioniert auch, hab mich wohl getäuscht. Jetzt gehts wieder weiter!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city