javascript - JavaScript 中的响应式导航菜单

Question

我正在尝试为我的网站构建响应式导航菜单。但是，当您进一步向下滚动页面时，它也应该保持在顶部。这在普通的“桌面大小”菜单上运行良好，但当我在响应式导航菜单中展开列表项时，整个菜单会自行重新定位回到顶部。

let navbar = document.querySelector("nav");
let offset = navbar.offsetTop;

// Makes the menu sticky
function stick() {
    if (window.pageYOffset >= offset) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

// Makes the menu responsive
function collapse() {
    if (navbar.className === "responsive") {
        navbar.classList.remove("responsive");
    } else {
        navbar.classList.add("responsive")
    }
}

我的 JSFiddle:https://jsfiddle.net/MihkelPajunen/t37g6hsc/

问题:有没有一种方法可以使响应式导航菜单具有粘性，以便在页面顶部可以访问菜单，即使您向下滚动页面也可以？

Answer 1

删除以下规则:

nav.responsive {
    position: relative;
}

因为这会覆盖 position: fixed 规则。

此外，像这样更改折叠功能:

if (navbar.className.indexOf("responsive") >=0 ) {

因为类名实际上类似于“responsive sticky”

Here's a fork of that fiddle