StartMenü soll oben anheften farbig undurchsichtig werden!

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 Menü ist anfangs halbdurchsichtig, soll unterhalb von der Slider Show angeordnet sein, also unterer Bildschirmrand. Wenn man scrollt, soll es dunkelblau + undurchsichtig werden, es soll oben im Bildschirmrand zu finden bleiben.

Der hier verwendete Code

<!doctype html> <html lang="de"> <head> <title>Welcome!</title> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } body{ display: block; background-image: url('funk1111.gif'); background-color:rgba(16,32,128,0.1); overflow:auto; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } nav{ background-color:rgba(135, 176, 218, 0.96); position:sticky; top:0; display:flex; width:100vw; height:60px; z-index:100; } nav a{ flex:1; font-size:30px; line-height:60px; } a { font-size: 14px; text-decoration:none; color:#fff; } a:hover { color: rgb(88,0,255); } .header { background-color: #f1f1f1; padding: 30px; text-align: center; } nav{ overflow: hidden; background:rgba(0,0,255,0.20); } nav a { display: block; color: #f2f2f2; text-align: center; text-decoration: none; font-size: 17px; } nav a:hover { background: #ddd; color: black;} nav a.active { background: #4CAF50; color: white;} iframe{ height:100vh; width:100%; } .iframe1{ height:calc(100vh - 90px); } </style> </head> <body> <div class="Header"> <iframe class="iframe1" srcdoc="<h1>Iframe slideshow</h1>"></iframe> </div> <nav> <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> </nav> <iframe srcdoc="<h1>Iframe seite 1</h1>"></iframe> <iframe srcdoc="S<h1>Iframe seite 2</h1>"></iframe> <iframe srcdoc="<h1>Iframe seite 3</h1>"></iframe> <script> window.onscroll = function() { var StartMenu = document.getElementsByTagName("nav")[0]; // var sticky = StartMenu.offsetTop; // console.log(window.innerHeight/100*20); helper=window.pageYOffset/100*20; if(helper<20){ helper='0.20'; }else{ if(helper>100){ helper=1; }else{ helper='0.'+helper; } } console.log(helper) StartMenu.style.background='rgba(0,0,255,'+helper+')'; } </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!