Jeg har rodet med et fast skærmhoved til når en side scrolles.
Det har afsløret en underlig opførsel når det drejer sig om rammer. Er der nogen her der kan forklare hvorfor rammerne opfører sig som de gør? Prøv at fjerne/aktivere rammerne på id'erne skrog, side- og skærmhoved. Det der især undrer mig er, at det øverste z-index-lag kun skjuler det underliggende hvis det er udstyret med en ramme, hvordan kan det være?
Bemærk at box-modellen er ændret. Prøv også at se siden med standard box-model og border aktiveret for skrog-id'et.
Koden ser sådan ud:
Kode: Vælg alt
<!DOCTYPE html>
<html>
<head>
<title>Fast top - studie</title>
<meta charset="utf-8">
<style>
@charset "utf-8";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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 {
border: 3px double SeaGreen; /* OBS: Her er border til gengæld nødvendig på sidehovedet, da det - af en eller anden mærkelig grund - ellers ikke vil skjule skærmhovedet! */
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;
}
</style>
</head>
<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 løsning er brug af rammer (border). På den ene side virker det ikke uden, og på den anden side kan det hurtigt komme til at se helt forkert ud med! I denne test har jeg endda ændret boxmodellen, så rammer ikke skulle ændre en boxstørrelse, men det virker altså ikke 100%.</p>
<p>Sidehovedet <em>skal</em> have ramme (og for den sags skyld baggrundsfarve, men det er ikke så mærkeligt) for at skjule skærmhovedet, mens en ramme på sidens skot (eller omrids eller wrapper) påvirker placeringen af skærmhovedet!</p>
<p>I kodens css-afdeling er indsat udkommenterede rammer. Prøv at aktivere dem og se effekten.</p>
<h1>Advarsel 2: Mobilskærm!</h1>
<p>Næste udfordring bliver at styre tekststørrelsen så den bliver ens på side- og skærmhoved. Den problematik omhandler dette dokument ikke.</p>
<h1>Og Scroll så ned</h1>
<figure>
<figcaption>En liste så lang at du burde være sikker på at kunne få skærmhovedet frem :-)</figcaption>
<ol reversed="">
<li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li> <li>Scroll ned</li>
</ol>
</figure>
</div><!--slut indhold -->
<div id="sidefod">div id="sidefod"
</div>
</div>
</body>
</html>