Sticky Header / Banner Elements

Einfaches Beispiel ein Header und drei Banner dessen Elemente eine Class isSticky bekommen. (781 Bytes) 05.08.2025 02:47

HTML:
banner.htm HTML (781 Bytes) 05.08.2025 02:47
<!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">
      <div class="logo">Sticky Header</div>
      <ul class="language">
        <li class="active">DE</li>
        <li>EN</li>
        <li>NL</li>
        <li>FR</li>
      </ul>
<button class="hamburger" type="button" title="Menü anzeigen"><span></span><span></span><span></span></button>
      <nav class="main">
        <ul>
          <li class="active">Programmierung</li>
          <li>Projekte</li>
          <li>Server</li>
          <li>Privat</li>
        </ul>
      </nav>
    </header>
    <main>Main</main>
    <script src="sticky.js"></script>
  </body>
</html>

Oder auch ohne banner: Beispiel (670 Bytes) 05.08.2025 02:47

sticky.htm HTML (670 Bytes) 05.08.2025 02:47
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="sticky.css" />
  </head>
  <body>
    <header class="sticky">
      <div class="logo">Sticky Header</div>
      <ul class="language">
        <li class="active">DE</li>
        <li>EN</li>
        <li>NL</li>
        <li>FR</li>
      </ul>
<button class="hamburger" type="button" title="Menü anzeigen"><span></span><span></span><span></span></button>
      <nav class="main">
        <ul>
          <li class="active">Programmierung</li>
          <li>Projekte</li>
          <li>Server</li>
          <li>Privat</li>
        </ul>
      </nav>
    </header>
    <main>Main</main>
    <script src="sticky.js"></script>
  </body>
</html>
JavaScript:
sticky.js JavaScript (3,03 kByte) 05.08.2025 02:46
// 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);
  }

  let hamburger = document.querySelector('header button.hamburger');
  let navi = document.querySelector('header nav.main');
  hamburger.addEventListener('click', function () {
    hamburger.classList.toggle('open');
    navi.classList.toggle('open');
  });
})()
StyleSheet:
sticky.css StyleSheet (3,41 kByte) 05.08.2025 02:48
body{ height: 200vh; font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}

/* banner */
@media screen {
  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;
  }
  .banner.left, .banner.right {
    display: none;
  }
}
@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;
  }
}

/* sticky header */
@media screen {
  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 .hamburger {
    position: absolute;
    top: 42px;
    right: 20px;
    color: white;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  header .hamburger span {
    width: 18px;
    height: 2px;
    background-color: black;
    margin: 4px 0;
    position: relative;
    display: block;
    transition: 0.4s;
  }
  header .hamburger.open span:nth-child(1) {
    transform: rotate(-45deg) translate(-4px, 4px);
  }
  header .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  header .hamburger.open span:nth-child(3) {
    transform: rotate(45deg) translate(-4px, -4px);
  }
  header nav.main {
    position: absolute;
    bottom: 15px;
    left: 240px;
    margin: 0;
  }
  header nav.main ul {
    list-style: none;
  }
  header nav.main ul 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%);
  }
}
@media screen and (min-width:700px) {
  header .hamburger {
    display: none;
  }
}
@media screen and (max-width:699px) {
  header nav.main {
    visibility: hidden;
  }
  header nav.main.open {
    visibility: visible;
    background: #0065b3;
    left: inherit;
    bottom: inherit;
    top: 79px;
    right: 0;
  }
  header nav.main.open ul {
    position: relative;
    background: #0065b3;
  }
  header nav.main.open ul li {
    float: inherit;
  }
}
@media print {
  header, .banner {
    display: none;
  }
}
/* body text */
main {
  text-align: center;
  padding: 2em 1em;
  margin: 0.5em auto;
  max-width: 1150px;
  height: 800px;
  background: #e5e5e5;
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.2.34
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Wed, 27. Aug 2025 07:10:57

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 24.04.2 LTS (Noble Numbat)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), max 3000.0000 MHz