Suche auf lima-city
-
in: Bei scrollen mit jQuery Element fixen funktioniert nicht
geschrieben von lucaniatech
Danke für den Tipp. Ich habe gedacht, die Kurzform funktioniert auch, hab mich wohl getäuscht. Jetzt gehts wieder weiter!
-
in: Bei scrollen mit jQuery Element fixen funktioniert nicht
geschrieben von lucaniatech
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