TAG
CSS
JavaScript
Result
Run
License
<header class="header"> <ul> <li>Section 1</li> <li>Section 2</li> <li>Section 3</li> </ul> </header> <main class="main"> <section> <h2>Section 1 title</h2> <p>Section contents</p> </section> <section> <h2>Section 2 title</h2> <p>Section contents</p> </section> <section> <h2>Section 3 title</h2> <p>Section contents</p> </section> </main> <footer class="footer"> <p>©2021</p> </footer>
body { margin: 0; overflow: hidden; } .header { position: fixed; left: 0; top: 0; right: 0; height: 50px; background: rgba(0, 0, 0, 0.7); } .header > ul { list-style: none; margin: 0; padding-left: 0; height: 100%; display: flex; justify-content: center; align-items: center; gap: 0 30px; } .main > section { min-height: 100vh; padding-top: 70px; } .footer { background: #CCC; overflow: hidden; }
window.addEventListener("load", function() { let elNavi = document.querySelector(".header > ul"); let aElSection = document.querySelectorAll(".main > section"); let curSIdx = 0; Array.from(elNavi.children, function(elMenu, idx, elMenus) { elMenu.addEventListener("click", function() { doScroll(idx); }); }); let wheelTimer; window.addEventListener("wheel", function(e) { clearTimeout(wheelTimer); wheelTimer = setTimeout(function() { if(e.deltaY < 0) doScroll(++curSIdx); else doScroll(--curSIdx); }, 50); }); function doScroll(sidx) { sidx = sidx < 0 ? 0 : sidx; sidx = sidx > aElSection.length - 1 ? aElSection.length - 1 : sidx; curSIdx = sidx; aElSection[curSIdx].scrollIntoView({ block: "start", inline: "start", behavior: "smooth" }); } });
Console
expand_less
License
License
by DevDic
Close