Anzeige
Tutorialbeschreibung

Mitscrollende Navigation mit jQuery

Mitscrollende Navigation mit jQuery

In diesem Tutorial zeige ich Ihnen, wie Sie eine mitscrollende Navigation realisieren. Dies geht mithilfe von DOM Events und der CSS Object Model View relativ einfach und browserübergreifend. Der Scroll-Effekt basiert auf jQuery.


Schritt 1: jQuery einbinden

Bitte versichern Sie sich also, dass die Datei jquery.js (Download) im gleichen Verzeichnis vorhanden ist, und binden Sie sie ein:
<script type="text/javascript" src="jquery.js">
</script>

Natürlich können Sie sie auch hotlinken(d.h. von einem fremden Server einbinden):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js">
</script>


Schritt 2: Navigation absolut positionieren

Dem Element, das die Navigation enthält (am besten div-Element), weisen Sie "position:absolute" zu. Damit dies eine Wirkung hat, muss das Elternelement eine andere Positionierungsart als "static" haben. Ich empfehle Ihnen, dafür "relative" zu verwenden.

Folgendes Quellcode-Beispiel veranschaulicht, was ich meine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html charset=ISO-8859-15">
 <title>mitscrollende Navigation</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 try {
 window.onscroll = setNavPosition;
 }
 catch(e) {
 document.documentElement.onscroll = setNavPosition;
 }
 function setNavPosition(){
 $('#navigation').stop();
 try {
 if (document.body.scrollTop > document.documentElement.scrollTop) {
 var targetPosition = document.body.scrollTop;
 }
 else {
 var targetPosition = document.documentElement.scrollTop;
 }
 }
 catch(e) {
 var targetPosition = document.documentElement.scrollTop;
 }
 $('#navigation').animate({top: targetPosition}, 1000);
 }
 </script>
 </head>
 <body>
 <div id="container" style="width: 600px; margin: auto; position: relative;">
 <div id="navigation" style="width: 200px; position: absolute; top: 0px; left: 0px;">
 <ul>
 <li><a href="link1.html">Link 1</a></li>
 <li><a href="link2.html">Link 2</a></li>
 <li><a href="link3.html">Link 3</a></li>
 </ul>
 </div>
 <div id="inhalt" style="width: 400px; position: absolute; top: 0px; right: 0px;">
 <p style="text-align: justify;">
 Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
 Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p style="text-align: justify;">
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
 vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
 praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 </p>
 <p style="text-align: justify;">
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
 vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
 luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 </p>
 <p style="text-align: justify;">
 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 </p>
 <p style="text-align: justify;">
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
 </p>
 <p style="text-align: justify;"> 
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
 sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
 no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren,
 kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 </p>
 <p style="text-align: justify;">
 Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
 sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
 no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 </p>
 </div> 
 </div>
 </body>
</html>



 
Das Beispiel sieht im Browser dann so aus:

Aussehen im FirefoxBilder



Schritt 3: Scroll-Effekt

<script type="text/javascript">

try {
 window.onscroll = setNavPosition;
}
catch(e) {
 document.documentElement.onscroll = setNavPosition;
}

function setNavPosition(){
 $('#navigation').stop();
 try {
 if (document.body.scrollTop > document.documentElement.scrollTop) {
 var targetPosition = document.body.scrollTop;
 }
 else {
 var targetPosition = document.documentElement.scrollTop;
 }
 }
 catch(e) {
 var targetPosition = document.documentElement.scrollTop;
 }
 $('#navigation').animate({top: targetPosition}, 1000);
}

</script>

"window.onscroll" beziehungsweise "document.documentElement.onscroll" (für verschidene Browser verschiedene Befehle) sorgt dafür, dass bei jedem Scrollen die Funktion "setNavPosition" aufgerufen wird. In dieser Funktion wird die Navigation neu positioniert (mit Animation). Die neue Position entspricht genau der Größe scrollTop, also wie weit vom Seitenanfang gemessen gescrollt wurde. Die Zahl 1000 bedeutet, dass die Animation 1000 Millisekunden = 1 Sekunde dauert. Wenn das Ihnen zu langsam ist, wählen SIe einen leicht kleineren Wert.

 
Das bedeutet, dass die Navigation - sobald gescrollt wird - in einer Sekunde gleichmäßig an den oberen Bildschirmrand scrollt. Wenn es schneller gehen soll, verwenden Sie einen kleineren Wert als 1000.

Aussehen im FirefoxBilder



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von BlackNova
  • 20.01.2011 - 10:15

Schön wäre es noch wen du hinzufügen würdest , wie man es einstellt das die Navbar nicht bis nach gantz oben gesetzt wird.

Portrait von tonmischer
  • 02.05.2014 - 16:34

Sehr schöne Geschichte und gut erklärt. Danke schonmal :)

Mich würde wie meinen Vorgänger auch noch interessieren, wie man realisieren kann, dass der Container nicht immer an den oberen Rand der Webseite wandert.

Wie mache ich denn das?

Portrait von glukgluk
  • 03.05.2014 - 17:34

Wenn ich richtig verstehe, was Sie wollen, dann müssen Sie beim div mit der id "navigation" top auf etwas grösseres als 0px setzen, z. B. 10px.

Portrait von S_A_M
  • 25.09.2010 - 09:05

Muss meinen Comment von eben berichtigen, hatte Ihn abgegeben nachdem ich die andren beiden Comments gelesen habe aber ohne mir vorher den Code genauer anzusehn.

Also von daher sollte es eigentlich, mit den richtigen Anpassungen, in allen Browsern funktionieren.

Portrait von S_A_M
  • 25.09.2010 - 09:02

Schade, dass es im Ie nicht funzt..ansonsten sehr gut erklärt. Einwandfrei. Danke

Portrait von Sarkasimus
  • 15.09.2010 - 15:55

Vielen Dank für dieses Tutorial! Funktioniert im FireFox, im IE wie schon erwähnt leider nicht.

Portrait von adilos
  • 14.09.2010 - 17:42

Nun, bei meinem IE "scolled" da nichts mit, werde später genauer nachsehen. Trotzdem Danke

x
×
×