如何在滚动页面时使拖放导航不出错？

Question

When the page scrolls the drop nav "bugs out". When the page scrolls the navigation opens and closes. Then when you scroll back to the top and the navigation is back in relative positioning the drop down will no longer open until you start scrolling down (at that point the first bug occurs again).

Is there a more efficient way of achieving this task?

I listed the full code below in case there is anything else on the site that could be causing the issue to happen.

I'm looking for a JavaScript answer.

 /* 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> 

Answer 1

To fix the opening and closing bug, you're looking to replace all of your .toggle() methods with .add() inside of if (pageYOffset > startPos) . Remember, .toggle() will both add and remove the relevant class. Considering you're scrolling, you're adding and then immediately removing the class. Simply adding the class (albeit repeatedly) will prevent it from flashing. You could alternatively check whether the class had been added already or not.

Note that you'll also want to change the toggle() methods inside your various switch cases to add() , though this is not strictly necessary, as the fix above will ensure they always have the correct class.

To fix the menu sticking 'closed' when you scroll back to the top of your page, you want to add overflow: visible to .pm-mainNav .

Finally, I'd also recommend using this instead of the multiple switch cases, cutting down on logical lines of code considerably.

Hope this helps! :)

 /* 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.add("dropdown-content-scroll"); services.classList.add("dropdown-content-scroll"); products.classList.add("dropdown-content-scroll"); resources.classList.add("dropdown-content-scroll"); goTo.classList.add("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.add("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.add("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.add("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.add("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.add("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: visible; 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>