JSFiddle - React, Tailwind, and code Playground

by jepperask

HTML

<body>
<div id="skrog">
   <div id="sidehoved">
      <h1>Fast top<br> – et css-studie</h1>
      <p>Manchet, plads til menulinje, motto eller andet</p>
   </div><!--slut sidehoved -->
   <div id="skærmhoved">
      <p>Manchet, plads til menulinje, motto eller andet</p>
   </div><!--slut skærmhoved -->
   <div id="indhold">
      <h1>Fast hoved på <em>skærmen</em> ved scroll</h1>
      <p>Siden har 2 sidehoveder, et sidehoved og et skærm-ditto, som ligger i de to øverste af sidens tre lag. </p> 
<pre>   1_____ __                   Sidehoved med titel og manchet (z-index: 2) - scrollbar
   2__                         Manchet (z-index: 1) - kan ikke scrolles
   3        _______________ __ Sidens indhold samt sidefoden (z-index: uspecificeret, dvs. 0) - scrollbar</pre>
      <p>I det første lag, der er placeret øverst både i (z-index-) stakken og på <em>siden</em>, ligger sidens hoved med titel og manchet. Det mellemste lag huser skærmhovedet med manchet, og den er altid placeret øverst på <em>skærmen</em> (position: fixed). Det nederste lag rummer sidens indhold, som på skærmen vises under sidehovedet.</p>
      <p>Som udgangspunkt er <em>skærmhovedet</em> ikke synligt. Det skjules af <em>sidehovedet</em> i det øverste lag.</p>
      <p>Når man scroller påvirker det ikke skærmhovedet, det kommer bare til syne når sidehovedet forsvinder over skærmens top. Sidens indhold vil også blive scrollet op over sidens top, men da indholdslaget ligger nederst i stakken vil det ikke dække over skærmhovedet, som vedbliver at være synligt indtil sidens hoved igen scrolles tilbage i toppen af skærmen.<br>
      <br>Eller med andre ord: Det midterste lag skjules af det øverste så længe det øverste ikke er scrollet ud af skærmen. Så snart det øverste lag ikke længere er synligt kommer det mellemste lag til syne.</p><p>At der er tale om to manchetter afsløres når der scrolles langsomt.</p>

      <h1>Advarsel: Pas på med rammer!</h1>
         <p>Noget af det mest drilske ved denne...

CSS

@charset "utf-8";
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
h1 {
  padding: 0;
  margin: 0;
}
body{
   margin:0;
   }
#skrog { /* Al indhold på siden er 'pakket ind' i 'skrog' */
   /* border: 20px solid tan;*/
   /* OBS: Farlig border, fixed positionering er øjensynlig /ikke immun/ overfor rammer på overordnede elementer i flowet! Heller ikke selv om boxmodellen er ændret her ovenover. Men prøv at aktivere den og se forskellen. */
   background: beige;
   }
#skrog, #skærmhoved { /* Bredden er både på skrog og skærmhoved da skærmhovedet grundet sin fixed position åbenbart ikke arver egenskaben fra skroget */
   max-width: 960px;
   width: 100%;
   }
#skrog,#sidehoved, #skærmhoved {   
   margin: 0 auto;
   }
#sidehoved, #skærmhoved {
   top: 0;
   text-align:center;
   }
#sidehoved {
   position: relative;
   background: darkSeaGreen;
   z-index: 2;
    }
#skærmhoved {
   background: darkSeaGreen;
   position: fixed;
   z-index: 1;
    }
#skærmhoved p {
   margin:0;
   padding:0;
    }
#sidefod {
   background: darkSeaGreen;
   }