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('/image/backgrnd_505.jpg');
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='/image/Logo1.png';" onmouseout="Logo.src=/image/Logo2.png">
<img id="Logo" src="/image/Logo2.png" 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>