Archiv-Modus von Basti1012 Lösungspage

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.

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>

basti1012.bplaced.net

StartMenü soll oben anheften farbig undurchsichtig werden!

Code