Auf Thema antworten

Beitrag

[QUOTE="Gast3326, post: 11846"]
Hallo,
ich brauche ganz dringend Hilfe. Ich muss für meine Abschlussprüfung eine Website programmieren. Uns wurde das auf der Arbeit erst sehr spät gezeigt, weshalb wird noch nicht so gut sind. Ich weiß leider nicht mehr weiter und bin kurz vorm verzweifeln
In meinem oberen Teil der Seite sind die Social Media Icons, das Logo und ein Burger Button. Diese Leiste soll beim Scrollen sticky sein( das hat funktioniert). Beim Scrollen soll aber auch das Logo etwas kleiner werden, alles etwas hochrutschen und die Leiste einen dunklen Hintergrund bekommen.
Ich habe leider noch nie mit Java gearbeitet.
Ich hoffe es kann mir jmd helfen.
Hier mein Code:

[CODE=html]
    
    <div class="container sticky-header">
        <div class="row">
            <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-2 col-xs-offset-1 social">
                <a href="https://www.instagram.com/" target="_blank"><img class="social-icon" src="images/instagram.png" width="40px" height="40px" alt="Instagram Icon"></a>
                <a href="https://de-de.facebook.com/" target="_blank"><img class="social-icon" src="images/facebook.png" width="40px" height="40px" alt="Facebook Icon"></a>
                <a href="https://www.youtube.com/" target="_blank"><img class="social-icon" src="images/youtube.png" width="40px" height="40px" alt="YouTube Icon"></a>
                <a href="https://accounts.snapchat.com/accounts/login?continue=https://accounts.snapchat.com/accounts/welcome" target="_blank"><img class="social-icon" src="images/snapchat.png" width="40px" height="40px" alt="Snapchat Icon"></a>
            </div>
            <div class="col-md-2 col-md-offset-2 col-sm-2 col-sm-offset-1 col-xs-2 col-xs-offset-2 logo">
                <img class="img-responsive" src="images/logo-weiss.png" width="85px" height="100px" alt="Logo">
            </div>
            <div class="col-md-1 col-md-offset-2 col-sm-1 col-sm-offset-1 col-xs-1 col-xs-offset-1">
                <p class="menu">MENU</p>
            </div>
            <div class="col-xs-1">
               <nav role="navigation">
                  <div id="menuToggle">
                    <input type="checkbox" />
                    <span></span>
                    <span></span>
                    <span></span>
                        <ul id="menu">
                          <a href="#Jubiläum"><li>Jubiläum</li></a>
                          <a href="#Chronologie"><li>Chronologie</li></a>
                          <a href="#Leistungen"><li>Leistungen</li></a>
                          <a href="#Maßschuhe"><li>Maßschuhe</li></a>
                          <a href="#Stimmen"><li>Stimmen</li></a>
                          <a href="#Pflegetipps"><li>Pflegetipps</li></a>
                          <a href="#Öffnungszeiten und Kontakt"><li>Öffnungszeiten und Kontakt</li></a>
                          <a href="#Impressum"><li>Impressum</li></a>
                        </ul>
                  </div>
                </nav>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row text-header header">
            <div class="col-xs-12">
                <h1>SCHUHMANUFAKTUR <br> FORMSCHÖN</h1>
                <p class="zitat-header"> „Eleganz von Kopf bis Fuß in Bad Godesberg“</p>
                <a href="#Jubiläum"><button class="button-header">Mehr erfahren</button></a>
            </div>
        </div>
    </div>[/CODE]

[CODE=css]body {
    background: #fff;
    margin: 0;
}
.container {
  margin: 0px auto;
  background-color:#fff;
}
/* Header */
    /* Burger Button */
#menuToggle {
  display: block;
  position: relative;
  top: 55px; /* Abstand Button */
  left: 45px; /* Abstand Button */
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle a {
  text-decoration: none;
  color: #ffffff; /* Farbe Nav-Elemente */
  transition: color 0.3s ease;
}
#menuToggle a:hover {
  color: #88A27B; /* Farbe Link */
}
#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* verstecken */
  z-index: 2; /* über Hamburger legen */
  -webkit-touch-callout: none;
}
#menuToggle span {
  display: block;
  width: 33px; /* Breite Button */
  height: 4px; /* Höhe Button */
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menuToggle span:first-child {
  transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #ffffff; /* Farbe X */
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}
#menu {
  position: absolute;
  width: 500px; /* Breite Kasten */
  height: 800px;
  margin: -100px 0 0 -100px;
  padding: 50px;
  padding-top: 125px;
  background: #282828;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(80%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul {
  transform: none;
}

.menu {
    color: #ffffff;
    font-size: 14px;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: normal;
    margin-top: 55px;
    padding-left: 90px;
}
.header {
    background-image: url(../images/header-desktop.jpg);
    width: 1200px;
    height: 880px;
    margin-top: -115px;
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: transparent;
}
.logo {
    margin-top: 15px;
    padding-left: 55px;
}
.social {
    margin-top: 50px;
}[/CODE]
[ATTACH type="full" alt="Bildschirmfoto 2021-06-14 um 16.42.40.png"]164[/ATTACH]

Vielen Vielen Dank!!
[/QUOTE]

Authentifizierung