Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften!
Manuel ich
- css
- html
Hi. Wer kennt passende CssFormatierung mit der man einen durchsichtiges HeaderMenü beim blättern nach unten undurchsichtig machen kann,
Danke.
Folgender Ansatz_
<!doctype html>
<html><head>
<title></title>
<body lang="DE" style="
display: block;
margin:0px; padding:0px; border:none; outline: none;
height: 100%;top:0px;left:0px;right:0px;bottom:0px;
background-color:rgba(16,32,128,0.1);
overflow: hidden;
">
<p class="MsoNoSpacing" style="position:absolute; left:0px;top:0px;margin:0px;z-index:10;">
<span style="
width: 100%;
height: 100%;
font-size: 14.0pt;
font-family:Arial;">
<a href="index.html" title="start" alt="Start" onmouseover="Logo.src='Logo1.gif';" onmouseout="Logo.src='Logo.gif';">
<img id="Logo" src="Logo.gif" border="0" width="300px">
</a>
</span>
<span style="color:white;mso-themecolor:background1">123 <span style="mso-tab-count:
1"> </span>mit345 <span style="mso-tab-count:1"> </span>Links567
<span style="mso-tab-count:1"> </span>789 <span style="mso-tab-count:
1"> </span>910 </span>
</span>
</p>
<iframe width="100%" height="100%" src="Slide1.html" frameborder="0" style="
margin:0px; padding:0px; border:none; outline: none;
height:100%;width:100%;
top:0px;left:0px;right:0px;bottom:0px;
background-color:rgba(0, 0, 128,0);
overflow: hidden;
position: absolute;
z-index:1
"></iframe>
</body></html>
Hallo Manuel,
Hi. Wer kennt passende CssFormatierung mit der man einen durchsichtiges HeaderMenü beim blättern nach unten undurchsichtig machen kann,
- soll als dünner Streifen oben angeheftet bleiben ?
Da gibt es unterschiedliche Ansätze, viele nutzen dazu das scroll-Event.
Gruss
Henry
@@Henry
Da gibt es unterschiedliche Ansätze, viele nutzen dazu das scroll-Event.
Welches man i.d.R. nicht ohne Debounce Function verwenden sollte.
Wer ergänzt den Wiki-Artikel?
W3Schools ist nicht gerade für gute Beispiele bekannt.
LLAP 🖖