Manuel ich: Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften!

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 ?

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">&nbsp; </span>mit345 <span style="mso-tab-count:1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>Links567
<span style="mso-tab-count:1">&nbsp;&nbsp; </span>789 <span style="mso-tab-count:
1">&nbsp; </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>
  1. 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.

    Beispiel.

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    1. @@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?

      Beispiel.

      W3Schools ist nicht gerade für gute Beispiele bekannt.

      LLAP 🖖

      --
      Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.