tag:forum.selfhtml.org,2005:/self
Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften! – SELFHTML-Forum
2020-02-17T11:04:30Z
https://forum.selfhtml.org/self/2020/feb/13/header-logo-startmenu-soll-beim-scrollen-undurchsichtig-werden-und-oben-anhaften/1765115#m1765115
Manuel ich
2020-02-13T18:43:46Z
2020-02-13T18:43:46Z
Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften!
<p>Hi. Wer kennt passende CssFormatierung mit der man
einen durchsichtiges HeaderMenü beim blättern nach unten
undurchsichtig machen kann,</p>
<ul>
<li>soll als dünner Streifen oben angeheftet bleiben
?</li>
</ul>
<p>Danke.</p>
<p>Folgender Ansatz_</p>
<pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
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;
<span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MsoNoSpacing<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">top</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">margin</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">z-index</span><span class="token punctuation">:</span>10<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
width: 100%;
height: 100%;
font-size: 14.0pt;
font-family:Arial;<span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Start<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onmouseover</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">Logo<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">'Logo1.gif'</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onmouseout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">Logo<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">'Logo.gif'</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Logo<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Logo.gif<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>white<span class="token punctuation">;</span><span class="token property">mso-themecolor</span><span class="token punctuation">:</span>background1</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>123 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">mso-tab-count</span><span class="token punctuation">:</span>
1</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title=" "> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>mit345 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">mso-tab-count</span><span class="token punctuation">:</span>1</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>Links567
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">mso-tab-count</span><span class="token punctuation">:</span>1</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title=" "> </span><span class="token entity named-entity" title=" "> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>789 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">mso-tab-count</span><span class="token punctuation">:</span>
1</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title=" "> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>910 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Slide1.html<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
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
<span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
https://forum.selfhtml.org/self/2020/feb/13/header-logo-startmenu-soll-beim-scrollen-undurchsichtig-werden-und-oben-anhaften/1765317#m1765317
Henry
2020-02-17T07:45:14Z
2020-02-17T07:45:14Z
Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften!
<p>Hallo Manuel,</p>
<blockquote>
<p>Hi. Wer kennt passende CssFormatierung mit der man
einen durchsichtiges HeaderMenü beim blättern nach unten
undurchsichtig machen kann,</p>
<ul>
<li>soll als dünner Streifen oben angeheftet bleiben
?</li>
</ul>
</blockquote>
<p>Da gibt es unterschiedliche Ansätze, viele nutzen dazu das <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/scroll" rel="nofollow noopener noreferrer">scroll-Event</a>.</p>
<p><a href="https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp" rel="nofollow noopener noreferrer">Beispiel.</a></p>
<p>Gruss<br>
Henry</p>
<div class="signature">-- <br>
Meine Meinung zu DSGVO & Co:<br>
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
</div>
https://forum.selfhtml.org/self/2020/feb/13/header-logo-startmenu-soll-beim-scrollen-undurchsichtig-werden-und-oben-anhaften/1765346#m1765346
Gunnar Bittersmann
selfhtml@bittersmann.de
https://bittersmann.de
2020-02-17T11:04:30Z
2020-02-17T11:04:30Z
Header (Logo + StartMenu) soll beim scrollen undurchsichtig werden und oben anhaften!
<p>@@Henry</p>
<blockquote>
<p>Da gibt es unterschiedliche Ansätze, viele nutzen dazu das <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/scroll" rel="nofollow noopener noreferrer">scroll-Event</a>.</p>
</blockquote>
<p>Welches man i.d.R. nicht ohne <a href="https://davidwalsh.name/javascript-debounce-function" lang="en" rel="nofollow noopener noreferrer">Debounce Function</a> verwenden sollte.</p>
<p>Wer ergänzt den Wiki-Artikel?</p>
<blockquote>
<p><a href="https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp" rel="nofollow noopener noreferrer">Beispiel.</a></p>
</blockquote>
<p>W3Schools ist nicht gerade für gute Beispiele bekannt.</p>
<p>LLAP </p>
<div class="signature">-- <br>
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
</div>