*Dringend!* Sticky Navigation

Diskutiere *Dringend!* Sticky Navigation im JavaScript Forum im Bereich Programmierung; Hallo, ich brauche ganz dringend Hilfe. Ich muss für meine Abschlussprüfung eine Website programmieren. Uns wurde das auf der Arbeit erst sehr...
G

gina12345

Member
Dabei seit
14.06.2021
Beiträge
5
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:
HTML:
<!-- Header -->
<!-- Burger Button -->
<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>

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;
}Bildschirmfoto 2021-06-14 um 16.42.40.png

Vielen Vielen Dank!!
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
106
irgendwie ist bei deinen sticky Burger menü alles verdreht.
Mach mal nee Zeichnung fertig wie das aussehen soll.
Dein jetziges Menü zeigt mir nicht das was du beschrieben hast.
Benutzt du Bootstramp , oder wie kommen deinen Classen Namen zu stande ?
 
G

gina12345

Member
Dabei seit
14.06.2021
Beiträge
5
irgendwie ist bei deinen sticky Burger menü alles verdreht.
Mach mal nee Zeichnung fertig wie das aussehen soll.
Dein jetziges Menü zeigt mir nicht das was du beschrieben hast.
Benutzt du Bootstramp , oder wie kommen deinen Classen Namen zu stande ?
Genau, ich benutze eine ältere Version von Bootstrap
So sieht aktuell mein jetziges Menü aus. Beim Scrollen soll es dann ca. so aussehen. Ich hoffe man versteht, was ich meine. Beim scrollen soll die Leiste oben also einfach dunkel hinterlegt werden und die einzelnen Teile (Icons, Logo und Burger Button) einfach etwas nach oben rutschen
 

Anhänge

  • Bildschirmfoto 2021-06-14 um 20.33.35.png
    Bildschirmfoto 2021-06-14 um 20.33.35.png
    13,7 KB · Aufrufe: 2
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
106
Und wie soll das aussehen wenn der Burger angeklickt wird?
Soll das Menü ohne Javascript laufen oder ist das erlaubt?

Hast du mal bei codepen nach ein Menü gesucht?
Da gibt es reichlich fertige die du dir anpassen kannst.
 
G

gina12345

Member
Dabei seit
14.06.2021
Beiträge
5
Klickt man auf den Burger Button, sieht er so aus.
Das Ganze darf auch mit JavaScript sein. Mein Ausbilder meinte, dass man, um der 'Leiste' beim scrollen einen Hintergrund zu geben, javascript benötigt wird.
Ich habe mir schon Sachen bei Codepen angeschaut nur habe ich leider keine Ahnung davon. Ich weiß nicht, wie man sowas einbinden muss etc.
 

Anhänge

  • Bildschirmfoto 2021-06-14 um 20.56.57.png
    Bildschirmfoto 2021-06-14 um 20.56.57.png
    563,8 KB · Aufrufe: 0
G

gina12345

Member
Dabei seit
14.06.2021
Beiträge
5
Also wenn ich zb diese hier benutzen möchte: https://codepen.io/jake2917/pen/ejjBYQ muss ich dann das, was in Java steht einfach unten hinpacken, bevor ich den body schließe? Ich verstehe leider nicht, was dort steht und was ich für Klassen dann in meinem Code ändern muss
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
106
Wenn du das Beispiel aus codepen benutzen willst muss deine Seite so aussehen
HTML:
<!doctype html>
<html>
  <head>
    <style>
      #box{
  width:100%;
  height:100vh;
  background-image: url(https://images.unsplash.com/photo-1484387436194-cf7cb70800ce?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=073c77fe92e53e22ed4a58231a5e0d47);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:  center;
}
/*  this is the outer div which hold the navbar its transparent color because of fixed-top class. padding here defines the height of the navbar this value must be lower than the padding in sticky-menu padding to give that sizing effect  */
.custom-nav{
  padding:20px 0;
      transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}
.sticky-menu {
    background: #fff;
    box-shadow: 0 1px 20px -3px rgba(0,0,0,.2);
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
/*   padding must be higher here */
    padding: 10px 0;
}


/*  when white sticky menu show- link will be of black color*/
.sticky-menu .navbar-dark .navbar-nav .nav-link {
    color: #000;
}
/*  when white sticky menu show- navbar-brand will of black color*/
.sticky-menu .navbar-dark .navbar-brand  {
    color: #000;
}

/*  */
.sticky-menu .navbar-dark .navbar-nav .active > .nav-link,
.sticky-menu .navbar-dark .navbar-nav .nav-link.active
{
   color:orange;
}

.navbar-brand{
  margin-left: 1rem;
}



.navbar-dark .navbar-nav .nav-link {
    font-size: 0.9rem;
  color:#fff;
    padding: 0 15px;
    text-transform: uppercase;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active{
  color:orange;
}
</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<header>
  <div class="custom-nav fixed-top">
  <div class="container">
    <div class="row">
      <div class="col">
        <nav class="navbar navbar-expand-md navbar-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
            
    </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Bio</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="#">About US</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
              </li>
            </ul>

          </div>
        </nav>

      </div>
    </div>
  </div>
</div>
</header>
<div id="box"></div>
  <h1>hello</h1>
  <h1>hello</h1>
<script>
  $( document ).ready(function() {
$(window).on('scroll', function() {
    var el = $('.custom-nav');
    if ($(window).scrollTop() > 50) {
        el.addClass('sticky-menu');
    } else {
        el.removeClass('sticky-menu');
    }
});
  });
</script>
</body>
</html>
 
S

scatello

Well-known member
Dabei seit
21.12.2020
Beiträge
124
Ich muss für meine Abschlussprüfung eine Website programmieren.
Es ist deine Abschlussprüfung, also ist es deine Aufgabe, das zu schreiben. Per Copy/Paste lernst du nichts und wird dir spätestens dann auf die Füße fallen, wenn du den Quellcode erklären sollst.

Und:

*Dringend!*​

Dringend ist in einem Forum mal rein gar nichts. Hier opfern Leute ihre Freizeit um zu helfen, da ist "dringend" ganz schön anmaßend!
 
Thema:

*Dringend!* Sticky Navigation

Oben