Menu (Logo und Links) soll auf StartSeite unten sein +soll beim scrollen oben anheften + von transparent wechseln in farbig/ undurchsichtig! bearbeitet von Manuel 04.03.2020 01:19 Hi. Menu (= Logo + Links) soll auf StartSeite unten am unteren BildschirmRand sein +soll beim scrollen oben anheften +soll Hintergrund wechseln von transparent nach farbig/ undurchsichtig! 1) Position. IST_ Habe ein Entwurf der KANN Menu oben anheften, wenn ich nach unten blättere, ok. Aber leider befindet sich beim laden der StartSeite unterhalb von BilderShow, dh. scrollen wird erforderlich. Soll_ Natürlich soll (Firmen) Logo als erstes beim öffnen der Seite zu erkennen sein. 2) Farbe ändern. IST_ MenuHintergrund KANN mit Hintergrund Farbe oder Bild hinterlegt sein. Die ist dann immer zu sehen. Soll_ Anfangs soll durchsichtig sein, beim runter blättern soll undurchsichtig/ farbig. Möglichkeit fehlt dass sich die Farbe der Position auf der WebSeite anpasst, entsprechend scrollen der Seite durch Betrachter! AUFBAU_ Auf der WebSeite gibts zur Begrüßung eine BilderShow im Hintergrund (bedeckt Seite), darauf soll das Menu zu erkennen sein. Unterhalb sollen ThemenBeitragsSeiten geladen werden. EntwurfsScript sieht folgender maßen aus_ ~~~ HTML, Css, Javascript <html> <head> <meta name="viewport" Information="width=device-width, initial-scale=1"> </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="SlideIntro.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(0, 8, 51, 0.93); z-index:100; "> <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-image: url('funk1111.gif');rgba(135, 176, 218, 0.96); background-color:black; color:white;} a.active {background-image: url('funk1111.gif');background-color:black; color:white;} </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="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ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <a href="#top" target="_self"><img src="Up.png" alt="to Top"></a> </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> ~~~
Menu (Logo und Links) soll auf StartSeite unten sein +soll beim scrollen oben anheften + von transparent farbig/ undurchsichtig! bearbeitet von Manuel 04.03.2020 01:20 Hi. Menu (= Logo + Links) soll auf StartSeite unten am unteren BildschirmRand sein +soll beim scrollen oben anheften +soll Hintergrund wechseln von transparent nach farbig/ undurchsichtig! 1) Position. IST_ Habe ein Entwurf der KANN Menu oben anheften, wenn ich nach unten blättere, ok. Aber leider befindet sich beim laden der StartSeite unterhalb von BilderShow, dh. scrollen wird erforderlich. Soll_ Natürlich soll (Firmen) Logo als erstes beim öffnen der Seite zu erkennen sein. 2) Farbe ändern. IST_ MenuHintergrund KANN mit Hintergrund Farbe oder Bild hinterlegt sein. Die ist dann immer zu sehen. Soll_ Anfangs soll durchsichtig sein, beim runter blättern soll undurchsichtig/ farbig. Möglichkeit fehlt dass sich die Farbe der Position auf der WebSeite anpasst, entsprechend scrollen der Seite durch Betrachter! AUFBAU_ Auf der WebSeite gibts zur Begrüßung eine BilderShow im Hintergrund (bedeckt Seite), darauf soll das Menu zu erkennen sein. Unterhalb sollen ThemenBeitragsSeiten geladen werden. EntwurfsScript sieht folgender maßen aus_ ~~~ HTML, Css, Javascript <html> <head> <meta name="viewport" Information="width=device-width, initial-scale=1"> </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="SlideIntro.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(0, 8, 51, 0.93); z-index:100; "> <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-image: url('funk1111.gif');rgba(135, 176, 218, 0.96); background-color:black; color:white;} a.active {background-image: url('funk1111.gif');background-color:black; color:white;} </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="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ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor Some text to enable scrolling.. qwertzuiopüasdfghjklöäyxcvbnmQWERTZUIOPASDFGHJKLÖYXCVBNM;:1234567890ß!"§$%&/()=?²³{[]}\,..</p> <a href="#top" target="_self"><img src="Up.png" alt="to Top"></a> </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> ~~~
nicht angemeldet
