StartMenü soll oben anheften +farbig +undurchsichtig werden!

Lemke · 19. Februar 2020

Für Seite baue ich an Rahmen (funktioniert aber noch nicht komplett, muss am einfachsten neu). Bestehend aus

1) Menu mit Logo +Links

2) SlideShow = SeitenHintergrund von externer Quelle via. iFrame.

3) darunter Text, mehrere externe InhaltElemente untereinander zB. Text, externe Seiten mit iFrame.

Herausforderung = Start Menu ist anfangs halbdurchsichtig, soll unterhalb von der SliderShow angeordnet sein, also unterer BildschirmRand.

---> Wenn man scrollt, soll es dunkelblau + undurchsichtig werden,
----> es soll oben im BildschirmRand zu finden bleiben.

LösungsAnsatz

html-seminar.de/woltlab/attachment/2202/

Bisheriger BearbeitungsStatus von mir = ordnet das Logo + StartMenu generell mit festem Abstand nach oben an, ist immer gleich farbig, das iFrameElement ist nicht untereinander, der Reihe nach, sondern in Schichten hintereinander/ übereinander. Mein ZwischenErgebnis teil ich lieber nicht

weil dann über Details rumgemeckert wird die nichts mit erzielter Funktion zu tun haben, obwohl zuerst das allgemeine GrundGerüst passend gemacht werden soll! Also am besten komplett neu.

Wer hat eine Idee?

basti1012 · 20. Februar 2020

Wenn ich das richtig verstehe soll eine Navigation von der mitte oder sonst wo beim Scrollen oben stehen bleiben.?

Dafür gibt es position:sticky;

Das es beim Scrollen von durchsichtig ,bis blau ohne durchsichtig werden soll hilft dir opacity.

Da du auch wissen mußt wo du gerade bist beim Scrollen mußt du mit Javascript die Scrollhöhe wissen.

Wenn du das weißt kannst du ab bestimmte Scroll höhe die verschiedene opacity Werte setzen.

Eine Beispiel Seite oder Beispiel Code wäre aber trotzdem hilfreich weil kaum einer alles selber bauen will.

Wenn du da schon was vorbereitet hast brauch man da nur noch den Fehlenden Code einsetzen und gut ist.

Du verstehen was ich meine ?

Lemke · 20. Februar 2020

HTML

<html><head>

<title>Welcome!</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-ico">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head><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-image: url('funk1111.gif');
    background-color:rgba(16,32,128,0.1);
    overflow: hidden;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;}
    a {font-size: 14px; 
    font-family: {Arial ,sans-serif; text-decoration:none; color:#fff;}
    a {float:left; padding: 0 0px;}
    a:hover {color: rgb(88,0,255);}
">

<div class="Header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
<iframe width="100%" height="100%" src="SlideIntro6.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);
    position: absolute; 
    z-index:1
"></iframe>
</div>


<div id="StartMenu" style="
    background-color:rgba(135, 176, 218, 0.96); 
    position: absolute;
    z-index:100;
">

<script>
    window.onscroll = function() {myFunction()};
    var StartMenu = document.getElementById("StartMenu");
    var sticky = StartMenu.offsetTop;
    function myFunction() {
    if (window.pageYOffset >= sticky) {
    StartMenu.classList.add("sticky")
    } else {
    StartMenu.classList.remove("sticky");
    }}
</script>

<style>
    .header {
        background-color: #f1f1f1;
        padding: 30px;
        text-align: center;}
    #StartMenu {
        overflow: hidden;
        background-color: #333;}
    #StartMenu a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;}
    #StartMenu a:hover {
        background-color: #ddd;
        color: black;}
    #StartMenu a.active {
        background-color: #4CAF50;
        color: white;}
    .content {
        padding: 16px;}
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;}
    .sticky + .content {
        padding-top: 0px;}
</style>
<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>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>



<iframe width="100%" height="100%" src="Service.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>

Alles anzeigen

Lemke · 20. Februar 2020

Ist aber noch Katastrophe!

Das Sticky ist schon drin.

Menu ist teils durchsichtig background-color:rgba(135, 176, 218, 0.96);
aber ändert nicht Farbe in undurchsichtig beim scrollen. Dafür fehlt mir jeder Ansatz.

In dem Menu werden die Links neben Logo angeordnet aber oben, und nicht unten an Linie ausgerichtet, das Problem ist auch bei anderer Seite an der ich (parallel) baue.

Der iFrame ist nicht in dem Menu als Hintergrund, sondern wird verschoben nach hinten als SeitenHintergrund.

Das einzige was (fast) klappt ist Logo kann mit hovern Bild ändern_

Code

<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>

aber leider kann ich nicht statt "width=300px" Höhe eingeben height="64px".

Max-Width... sowas wird garnicht angewandt vom Browser.

Mehrere iFrame Elemente werden hintereinander angeordnet, anstatt nacheinander.

Lemke · 20. Februar 2020

html-seminar.de/woltlab/attachment/2203/

Dann beim Scrollen nach unten_

html-seminar.de/woltlab/attachment/2204/

basti1012 · 20. Februar 2020

Ich weiß noch nicht ganz was du da vorhast, vor allem einen iframe als background Slider zu benutzen verstehe ich nicht.

Ich habe jetzt auch mal etwas rum gespielt und damit zeige ich dir wie ich das mit den position:sticky meine.

Der rest ist uninteresant , weil das nicht mein Endergebniss ist.

Gerade das mit den durchsichtig zu nicht durchsichtig müßte ich erst selber Googeln wie man das noch machen könnte

https://codepen.io/basti1012/pen/ZEGpeVK?editors=1010

Lemke · 20. Februar 2020

Hi Basti1012, danke. Die Farbe ändert sich genauso wie das sein soll.

Konnte das Script rüber kopieren, ändert die Farbe dadurch genauso,

aber hält mit meinem Html nicht mehr oben, sondern bewegt sich über den Rand hinaus, bei mir.

Dann hab ich gesehen du hast dem Menu anscheinend 10% Höhe zugewiesen, dem iFrame 90%. Kann das sein? Gute Idee. Das ist eine Frage, wie kann man das Menu anpassen, dass es über der BegrüßungsSlideShow gezeigt wird, statt darunter?

Hab auch weiter gemacht mit dem Dokument. Elemente neu benannt, Content ist Information, StartMenu sind jetzt StartLinks und Header ist StartMenu.

Da hat sich Problem aufgetan, dass ScrollBalken in den iFrames erscheinen. Die iFrames nehmen nicht komplette Höhe ein von den verlinkten Seiten, sondern nur 100% vom Monitor. Man sollte mit kompletter Seite alles zusammen scrollen können. Weil 2 oder mehr ScrollBalken nebeneinander sehen nicht gut aus. Wie kann man das?

HTML

<html>
<head>
<meta name="viewport" Information="width=device-width, initial-scale=1">
<style>
    .sticky {position:fixed; top:0; width:100%; }
    .sticky + .Information {padding-top:60px; }
    a {float:left; display:block; color: #f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px;}
    a:hover {background-color: #ddd; color:black;}
</style>
</head>

<body style="margin:0; font-size:28px; font-family: Arial, Helvetica, sans-serif;">

<div class="StartMenu" style="background-color:#f1f1f1; padding:0px; text-align:center;">
<iframe width="100%" height="100%" src="SlideIntro6.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);
    position: relative; 
    z-index:1
"></iframe>
</div>

<div id="StartLinks" style="
    overflow:hidden; 
    background-color: rgba(7, 7, 118, 0.13);
    z-index:100; 
">

<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>
    <a href="javascript:void(0)">Kontakt</a>
    <a href="javascript:void(0)">News</a>
    <a href="javascript:void(0)">Firma</a>
    <a href="javascript:void(0)">Jobs</a>
    <a href="javascript:void(0)">Partner</a>
    <a href="javascript:void(0)">Ziele</a>
</div>

<div class="Information" style="padding:16px;">

<iframe width="100%" height="100%" src="Service.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; 
    z-index:1
"></iframe>

  <h3>Sticky Navigation Example</h3>
  <p>The StartLinks will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&amp;/()=?²³{[]}\,..</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
   <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%@@@WCF_LITERAL_AMP@@@/()=?²³{[]}\,..</p>
 </div>

<script>
window.onscroll = function() {myFunction()};

var StartLinks = document.getElementById("StartLinks");
var sticky = StartLinks.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    StartLinks.classList.add("sticky")
  } else {
    StartLinks.classList.remove("sticky");
  }
}
</script>

</body>
</html>

Alles anzeigen

Dann außerdem meckert der InternetExplorer rum, es gäbe ein paar blockierte Elemente. Warum? Was soll das heißen? Sowas macht auf Besucher sicher schlechten Eindruck.

Wie kann man es so ändern dass auch mit InternetExplorer alles sofort ohne Problem klappt?

StartMenü soll oben anheften +farbig +undurchsichtig werden!

Jetzt mitmachen!

Teilen

Tags