Sticky Header / Banner Elements Einfaches Beispiel ein Header und drei Banner dessen Elemente eine Class isSticky bekommen. (657 Bytes) 08.12.2021 08:08 HTML: banner.htm HTML (657 Bytes) 08.12.2021 08:08 <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="sticky.css" /> </head> <body> <div class="banner top"></div> <div class="banner left"></div> <div class="banner right"></div> <header class="sticky"> <ul class="language"> <li class="active">DE</li> <li>EN</li> <li>NL</li> <li>FR</li> </ul> <div class="logo">Sticky Header</div> <ul class="navi"> <li class="active">Programmierung</li> <li>Projekte</li> <li>Server</li> <li>Privat</li> </ul> </header> </body> <main>Main</main> <script src="sticky.js"></script> </html> Oder auch ohne banner: Beispiel (546 Bytes) 08.12.2021 08:09 sticky.htm HTML (546 Bytes) 08.12.2021 08:09 <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="sticky.css" /> </head> <body> <header class="sticky"> <ul class="language"> <li class="active">DE</li> <li>EN</li> <li>NL</li> <li>FR</li> </ul> <div class="logo">Sticky Header</div> <ul class="navi"> <li class="active">Programmierung</li> <li>Projekte</li> <li>Server</li> <li>Privat</li> </ul> </header> </body> <main>Main</main> <script src="sticky.js"></script> </html> JavaScript: sticky.js JavaScript (2,77 kByte) 09.12.2021 19:07 // coding: utf-8 /*! Created by: Udo Schmal | https://www.gocher.me/ */ (function () { 'use strict'; let stickyHeader = document.querySelector('header.sticky'); var clone = null; let bannerLeft = document.querySelector('div.banner.left'); let bannerRight = document.querySelector('div.banner.right'); // for old browser that doesn't support position sticky let positionSticky = 'sticky'; let intersectionObserver = new IntersectionObserver( function (entries) { if(entries[0]) { if (entries[0].boundingClientRect.top < 0) { // for old browser that doesn't support position sticky if (positionSticky != "sticky") { if (!clone) { clone = stickyHeader.cloneNode(true); clone.classList.add('clone'); clone.classList.add('isSticky'); stickyHeader.parentNode.insertBefore(clone, stickyHeader.nextSibling); stickyHeader.style.position = 'relative'; stickyHeader.style.top = 'inherit'; } clone.style.width = window.getComputedStyle(stickyHeader).getPropertyValue('width'); } else { entries[0].target.classList.add('isSticky'); } if (bannerLeft) { bannerLeft.classList.add('isSticky'); } if (bannerRight) { bannerRight.classList.add('isSticky'); } } else { entries[0].target.classList.remove('isSticky'); if (bannerLeft) { bannerLeft.classList.remove('isSticky'); } if (bannerRight) { bannerRight.classList.remove('isSticky'); } // for old browser that doesn't support position sticky if (positionSticky != "sticky") { if (clone) { stickyHeader.parentNode.removeChild(clone); clone = null; stickyHeader.style.position = ''; stickyHeader.style.top = ''; } } } } }, {threshold: [1]} ); let resizeObserver = new ResizeObserver( function (entries) { if (positionSticky != "sticky") { if (clone) { let style = window.getComputedStyle(stickyHeader); clone.style.width = style.getPropertyValue('width'); } } } ); if (stickyHeader) { let style = window.getComputedStyle(stickyHeader); positionSticky = style.getPropertyValue("position"); stickyHeader.style.top = (parseInt(style.getPropertyValue('top'), 10) -1) + 'px'; stickyHeader.style.paddingTop = (parseInt(style.getPropertyValue('padding-top'), 10) +1) + 'px'; intersectionObserver.observe(stickyHeader); resizeObserver.observe(stickyHeader); } })() StyleSheet: sticky.css StyleSheet (2,09 kByte) 08.12.2021 08:19 body{ height: 200vh; font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;} /* banner */ div.banner{ background: white repeating-linear-gradient( 45deg, #EEE, #EEE 5px, #FFF 5px, #FFF 10px ); margin: 0.5em auto; padding: 0; text-align: center; } div.banner.top { width: 600px; height: 120px; } @media screen and (min-width:1550px) { div.banner.left, div.banner.right { display: block; position: absolute; top: 130px; height: 600px; width: 160px; } div.banner.left { left: 15px; } div.banner.right { right: 15px; } div.banner.isSticky { position: fixed; top: 1px; } } .banner.left, .banner.right { display: none; } /* sticky header */ header{ position: sticky; top: 0; margin: 0 auto 0 auto; max-width: 1150px; padding: 1em; background: #0065b3; transition: all 500ms linear; } header ul.language { position: absolute; top: 0; right: 20px; margin: 0; padding: 4px 2px; background-color: #2d3c50; color: white; list-style: none; } header ul.language li{ float: left; margin: 2px; padding: 2px 6px; border-left: 1px solid #fff; } header ul.language li:not(.active){ cursor: pointer; } header ul.language li.active{ background-color: #818a96; } header ul.language li:first-child { border-left: 0; } header ul.navi { position: absolute; bottom: 15px; left: 240px; margin: 0; list-style: none; } header ul.navi li{ float: left; font-weight: bold; padding: 2px 16px; cursor: pointer; } header .logo { padding: 15px; font-weight: bold; font-size: 25px; position: relative; transition: all 500ms linear; } /* styles for when the header is in sticky mode */ header.isSticky { padding: .5em 1em; } header.isSticky .logo { font-weight: normal; font-size: 20px; } header.isSticky .logo::after { content:" is sticky"; } /* header clone old browser fix */ header.sticky.clone { position: fixed; left: 50%; transform: translateX(-50%); } /* body text */ main { text-align: center; padding: 2em 1em; margin: 0.5em auto; max-width: 1150px; height: 800px; background: #e5e5e5; } Author: Udo Schmal, published: 07.12.2021, last modified: 06.09.2023