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="&nbsp;">&nbsp;</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="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</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="&nbsp;">&nbsp;</span><span class="token entity named-entity" title="&nbsp;">&nbsp;</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="&nbsp;">&nbsp;</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>