Sticky Header (Top-Bar) - fixer DIV-Container

Einbindung

Mit dieser Funktion können Sie eine Top-Bar oder einen eigenen DIV-Container so fixieren, dass der Container beim Scrollen immer oben im Browserfenster stehen bleibt.

HTML - Body

Fügen Sie den folgenden Code in den gewünschten Bereich der HTML-Seite ein.

CSS

Ergänzen Sie die vorhandene CSS-Datei mit den folgenden Stylesheet-Definitionen.

					
						/* Style the topbar */
						#topnav {
							overflow: hidden;
							background-color: #333;
							padding: 10px 20px;
							z-index: 9999;
						}
						
						/* Topbar links */
						#topnav a {
							color: #f2f2f2;
							padding-left: 10px;
							padding-right: 10px;
							text-decoration: none;
							font-size: 16px;
							line-height: 20px;  
						}
						
						/* Page content */
						.navbar {
							padding: 16px;
						}
						
						/* The sticky class is added to the navbar with JS when it reaches its scroll position */
						.sticky {
							position: fixed;
							top: 0;
							width: 100%;
							z-index: 9999;
						}
						
						/* Add some top padding to the page content to prevent sudden quick movement - as the navigation bar
						gets a new position at the top of the page (position:fixed and top:0) */
						.sticky + .navbar {
							padding-top: 60px;
						}

HTML - Body - JavaScript einügen

Fügen Sie dieses Javascript vor dem schließenden <body>-Tag ein.

Hinweis
Achten Sie darauf, dass bei "document.getElementById("topnav")" die richtige ID des Navbar-Containers verwendet wird.

Beispiel