0
Wenn die Seite scrollt, wird das Drop-Nav "ausgeblendet". Wenn die Seite scrollt, wird die Navigation geöffnet und geschlossen. Wenn Sie dann nach oben scrollen und die Navigation wieder in relativer Position ist, öffnet sich die Dropdown-Liste nicht mehr, bis Sie nach unten scrollen (zu diesem Zeitpunkt tritt der erste Fehler erneut auf).Wie kann ich meine Drop-Navigation dazu bringen, beim Seiten-Scrollen keinen Bug auszulösen?
Gibt es eine effizientere Möglichkeit, diese Aufgabe zu erfüllen?
Ich habe den vollständigen Code unten aufgelistet, falls es auf der Website noch etwas anderes gibt, das das Problem verursachen könnte.
Ich bin auf der Suche nach einer JavaScript-Antwort.
/* Navigation Scroll */
var startPos = -1;
window.onscroll = function() {
var bar = document.getElementById('pm-nav');
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
if (startPos < 0) startPos = findPosY(bar);
if (pageYOffset > startPos) {
bar.style.position = 'fixed';
bar.style.top = 0;
ourCompany.classList.toggle("dropdown-content-scroll");
services.classList.toggle("dropdown-content-scroll");
products.classList.toggle("dropdown-content-scroll");
resources.classList.toggle("dropdown-content-scroll");
goTo.classList.toggle("dropdown-content-scroll");
} else {
bar.style.position = 'relative';
ourCompany.classList.remove('dropdown-content-scroll');
services.classList.remove('dropdown-content-scroll');
products.classList.remove('dropdown-content-scroll');
resources.classList.remove('dropdown-content-scroll');
goTo.classList.remove('dropdown-content-scroll');
}
};
function findPosY(obj) {
var curtop = 0;
if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
curtop += obj.offsetTop;
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
/* When the user clicks on the button, toggle between hiding and showing the dropdown(s) content */
function toggleDrop(drop) {
switch (drop) {
case "our-company":
document.getElementById("services").classList.remove('active-drop');
document.getElementById("products").classList.remove('active-drop');
document.getElementById("resources").classList.remove('active-drop');
document.getElementById("go-to").classList.remove('active-drop');
document.getElementById("our-company").classList.toggle("active-drop");
break;
case "services":
document.getElementById("our-company").classList.remove('active-drop');
document.getElementById("products").classList.remove('active-drop');
document.getElementById("resources").classList.remove('active-drop');
document.getElementById("go-to").classList.remove('active-drop');
document.getElementById("services").classList.toggle("active-drop");
break;
case "products":
document.getElementById("services").classList.remove('active-drop');
document.getElementById("our-company").classList.remove('active-drop');
document.getElementById("resources").classList.remove('active-drop');
document.getElementById("go-to").classList.remove('active-drop');
document.getElementById("products").classList.toggle("active-drop");
break;
case "resources":
document.getElementById("services").classList.remove('active-drop');
document.getElementById("products").classList.remove('active-drop');
document.getElementById("our-company").classList.remove('active-drop');
document.getElementById("go-to").classList.remove('active-drop');
document.getElementById("resources").classList.toggle("active-drop");
break;
case "go-to":
document.getElementById("services").classList.remove('active-drop');
document.getElementById("products").classList.remove('active-drop');
document.getElementById("resources").classList.remove('active-drop');
document.getElementById("our-company").classList.remove('active-drop');
document.getElementById("go-to").classList.toggle("active-drop");
break;
default:
//make this unknown...
}
}
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
if (ourCompany.classList.contains('active-drop')) {
ourCompany.classList.remove('active-drop');
}
if (services.classList.contains('active-drop')) {
services.classList.remove('active-drop');
}
if (products.classList.contains('active-drop')) {
products.classList.remove('active-drop');
}
if (resources.classList.contains('active-drop')) {
resources.classList.remove('active-drop');
}
if (goTo.classList.contains('active-drop')) {
goTo.classList.remove('active-drop');
}
}
}/* Basic Site Rules */
* {margin:0;padding:0;}
.maxWidth-1280 {max-width:1280px;margin:0 auto;}
.maxWidth-1440 {max-width:1440px;margin:0 auto;}
.pm-box-sizing * {box-sizing: border-box;}
/* Columns */
.pm-col-5 {
float: left;
width: 20%;
}
/* Clear floats after the columns */
.pm-row:after {
content: "";
display: table;
clear: both;
}
/* Columns :END*/
/* Basic Site Rules :END */
/* Main Header */
.pm-mainHeader {
text-align:center;
padding: 65px 0;
}
/* Main Header :END */
/* Main Navagation */
.pm-mainNav {
overflow: hidden;
background-color: #333;
font-family: Arial;
margin: 0 auto;
z-index:10;
width:100%;
left:0;
right:0;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
width: 100%;
padding: 16px;
background-color: inherit;
}
.pm-mainNav a:hover, .dropdown:hover .dropbtn {
background-color: white;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content-scroll {
position: fixed;
top: 50px;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.active-drop {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.pm-mainNav a {width: 100%;}
.dropdown, .dropbtn {width: 100%;}
.column {
width: 100%;
height: auto;
}
}
/* Main Navagation :END */
/* Main Content */
.pm-mainContent {
background: #e3e3e3;
padding: 500px 0;
text-align:center;
}
/* Main Content :END*/
/* Main Footer */
.pm-mainFooter {
padding: 100px 0;
text-align:center;
background: #333;
color: white;
}
/* Main Footer :END */<form id="siteForm" runat="server">
<!-- Website Header -->
<header class="pm-mainHeader">
<div class="maxWidth-1440">This is a Header</div>
</header>
<!-- Website header :END -->
<!-- Website Navigation -->
<div id="pm-nav" class="pm-mainNav">
<div class="maxWidth-1440">
<div class="pm-row pm-box-sizing">
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('our-company');return false;" class="dropbtn">Our Company</button>
<div id="our-company" class="dropdown-content maxWidth-1440">
<div class="header">
<h2>Menu our-company</h2>
</div>
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('services');return false;" class="dropbtn">Services</button>
<div id="services" class="dropdown-content maxWidth-1440">
<div class="header">
<h2>Menu services</h2>
</div>
<div class="pm-row">
<div class="column">
<h3>Category 4</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 5</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 6</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('products');return false;" class="dropbtn">Products</button>
<div id="products" class="dropdown-content maxWidth-1440">
<div class="header">
<h2>Menu products</h2>
</div>
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('resources');return false;" class="dropbtn">Resources</button>
<div id="resources" class="dropdown-content maxWidth-1440">
<div class="header">
<h2>Menu resources</h2>
</div>
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<div class="dropdown pm-col-5">
<button onclick="toggleDrop('go-to');return false;" class="dropbtn">Go To</button>
<div id="go-to" class="dropdown-content maxWidth-1440">
<div class="header">
<h2>Menu go-to</h2>
</div>
<div class="pm-row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Website Navigation :END -->
<!-- Main Content -->
<div class="pm-mainContent">
<div class="maxWidth-1440">
Hello World!!
</div>
</div>
<!-- Main Content :END -->
<!-- Main Footer -->
<footer class="pm-mainFooter">
<div class="maxWidth-1440">This is a Footer</div>
</footer>
<!-- Main Footer :END -->
</form>
Können Sie bitte definieren "* Fehler aus *"? Das Scrollen scheint sich in erwarteter Weise für mich zu verhalten. Was genau passiert, was du als fehlerhaft ansiehst und was genau sollte stattdessen passieren? Und welchen Browser benutzen Sie? Das kann einen Unterschied machen. –
@ObsidianAge Wenn die Seite scrollt, wird die Navigation geöffnet und geschlossen. Wenn Sie dann nach oben scrollen und die Navigation wieder in relativer Position ist, öffnet sich die Dropdown-Liste nicht mehr, bis Sie nach unten scrollen (zu diesem Zeitpunkt tritt der erste Fehler erneut auf). –
@ObsidianAge Was ich am liebsten hätte, ist, dass das Navigationssystem direkt unterhalb der Navigation folgt, auch wenn die Seite scrollt. Ich habe in der neuesten Version von Google Chrome getestet. –