Fast sidetop med css

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15
Fast sidetop med css

Indlæg af wbie » 1. dec 2015, 20:47

Hej forumbrugere.
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>

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Fast sidetop med css

Indlæg af cristian » 4. dec 2015, 20:15

Jeg forstår ikke problemet og det spørgsmål du søger svar på :/

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: Fast sidetop med css

Indlæg af wbie » 5. dec 2015, 14:27

Når jeg skriver
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?
er det fordi jeg ikke forstår logikken i effekten af ændringen med og uden rammer.

Her har jeg vedhæftet to skærmdump, et med og et uden ramme på sidehovedet (div'en med z-index=2), det øverste lag.
1. For det første bliver højden på laget mindre uden ramme, hvad det ikke skulle blive med den anvendte boxmodel og i øvrigt i en grad der overhovedet ikke har noget med rammebredden at gøre.
2. For det andet lægger div'en sig efter skærmhoved-div'en, hvad den ikke gør med ramme.
3. Det betyder også at det nederste indholds-lag (z-index=0) bliver placeret længere nede på siden.

Rammen får altså div'en til at opføre sig ganske anderledes end den gør uden. Hvor er logikken?
Bemærk at jeg på eksemplerne her for at tydeliggøre det hele har givet skærmhovedet sin egen baggrundsfarve.
Fasttop01.png
Fasttop01.png (38.1KiB)Vist 9535 gange
Fasttop02.png
Fasttop02.png (45.21KiB)Vist 9535 gange

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Fast sidetop med css

Indlæg af jepperask » 6. dec 2015, 23:09

Jeg ville stack-overflowe den for en forklaring. Det underlige er at skrog bliver skubbet ned under din fixed-div.

Anyways, fjern borderen og tilføj til dit css:

Kode: Vælg alt

h1 {
margin: 0;
padding: 0; 
}
Kan ses her: https://jsfiddle.net/jepperask/a2dx7sqa/

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: Fast sidetop med css

Indlæg af wbie » 7. dec 2015, 13:51

Ja, du har sørme ret, det er skroget der bliver rykket efter den fixerede div. Det havde jeg ikke lige set. Det vil altså sige at uden border på sidehovedet bliver skroget placeret anderledes på siden, og det selv om sidehovedet er en del af skroget og ikke omvendt! Det er stik modsat den sædvanlige css-logik.

Ang. h1-tagget så er padding og margin her ikke interessant. Jeg har ingen problemer med at der skal være border på sidehovedet, men med at kunne forstå logikken i hvordan man styrer sit layout med css.
Den logik ser ikke konsistent ud i dette tilfælde, med mindre altså der er noget jeg mangler at forstå eller vide.

Uanset hvad, så tak for dit bidrag til mysteriet. Måske andre kan komme tættere på svaret? - og tak også for at vise det på jsfiddle.net.

PS forresten, hvad mener du med
Jeg ville stack-overflowe den for en forklaring.

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Fast sidetop med css

Indlæg af jepperask » 7. dec 2015, 16:55

Stackoverflow er en hjemmeside hvor man kan stille programmeringsrelaterede spørgsmål og få flere svar som upvotes, alt efter hvor godt man mener svaret løser og beskriver problemet.

Jeg tror desuden position fixed kan have noget at sige også, men måske har border en egenskab der ændrer noget. Jeg mener at borders lægges på som der sidste også, men stackoverflow giver dig sikkert den forklaring du ønsker.

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: Fast sidetop med css

Indlæg af wbie » 7. dec 2015, 21:53

Aha, det lyder som en god idé. Jeg vil overveje at lave en angliseret udgave og sende spørgsmålet videre.
Takker.

Besvar