Volle Breite Hover Navigation mit festen Top

Question

Sir/mam, Ich habe Probleme mit meiner Navbar.Ich will es oben behoben werden Wenn Scroll aber die "Dropdown-Inhalt" geht nach oben, wenn das Nav zu Top It Doesn behoben Gehe nicht mit der Navigationsleiste. Ich möchte, dass es mit Navbar einhergeht.

.dropbtn { 
 
background-color: #006600; 
 
color: #fff; 
 
font-size: 15px; 
 
padding:10px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    overflow: hidden; 
 
    background-color: #5f5; 
 
    width:1024px; 
 
    left:0; 
 
    position: fixed;  
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block;  
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #eee; 
 
    color: black; 
 
} 
 
#bgcl{ 
 
background: #006600; 
 
width: 1024px; 
 
} 
 
.nav{ 
 
position: relative; 
 
text-align: center; 
 
width: 1366; 
 
z-index: 9999; 
 
top:100px; 
 
overflow: hidden; 
 
} 
 
#page{ 
 
    height: 1500px; 
 
}

<div id="page"> 
 
    <div class="nav"> 
 
    <div id="bgcl" > 
 
     <div class="dropdown"> 
 
     <a href="#"><button class="dropbtn">Option 1</button></a> 
 
     <div class="dropdown-content"> 
 
     <h1>full width Dropdown 1</h1> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <a href="#"><button class="dropbtn">Option 1</button></a> 
 
     <div class="dropdown-content"> 
 
     <h1>full width Dropdown 2</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Code W3schools kopiert und eine lil Änderung tat, weil die Drop-Down-Größe klein waren und ich möchte es breiter sein.

Answer 1

Nun, wenn ich das gut verstehe. Sie müssen JavaScript verwenden, um die Navigationsleiste oben zu fixieren, wenn Sie scrollen. Ich benutze das var topPos, um die konstante Höhe des Scrolls zu kennen, und wenn höher als 100 ist, füge die Klasse navbarTop hinzu, die neue Styles auf die navbar wie die Position anwendet: fixed; und setze den Anfang: 0; Drücken Sie die Navigationsleiste an den Anfang der Seite.

var scrollTop = $(".nav"); 
 
    
 
    $(window).scroll(function() { 
 
    \t var topPos = $(this).scrollTop(); 
 
    
 
    if (topPos > 100) { 
 
     $(scrollTop).addClass("navbarTop"); 
 

 
    } else{ 
 
    \t $(scrollTop).removeClass("navbarTop"); 
 
    } 
 
\t });

.dropbtn { 
 
background-color: #006600; 
 
color: #fff; 
 
font-size: 15px; 
 
padding:10px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    overflow: hidden; 
 
    background-color: #5f5; 
 
    width:1024px; 
 
    left:0; 
 
    position: fixed;  
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block;  
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #eee; 
 
    color: black; 
 
} 
 
#bgcl{ 
 
background: #006600; 
 
width: 1024px; 
 
} 
 
.nav{ 
 
position: relative; 
 
text-align: center; 
 
width: 1366; 
 
z-index: 9999; 
 
top:100px; 
 
overflow: hidden; 
 

 

 
} 
 
#page{ 
 
    height: 1500px; 
 
} 
 

 
.navbarTop{ 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="page"> 
 
    <div class="nav"> 
 
    <div id="bgcl" > 
 
     <div class="dropdown"> 
 
     <a href="#"><button class="dropbtn">Option 1</button></a> 
 
     <div class="dropdown-content"> 
 
     <h1>full width Dropdown 1</h1> 
 
     </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <a href="#"><button class="dropbtn">Option 1</button></a> 
 
     <div class="dropdown-content"> 
 
     <h1>full width Dropdown 2</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Ich glaube, Ihr #nav div zu einer festen Position haben sollte.

.nav{ 
    position: fixed; 
... 

Haben Sie danach gesucht?