position fixed 加js时导航栏跳到右边，试图用width(calc)补偿，打开侧边导航坏了

Question

I am working on a small site, where I am trying to learn how different navigation menus can interact with each other with html, css and js.我在一个小网站上工作，在那里我试图了解不同的导航菜单如何与 html、css 和 js 相互交互。 My issue is that my top navigation bar does not interact correctly with my sidebar navigation.我的问题是我的顶部导航栏无法与侧边栏导航正确交互。 When i add the sticky class to my top navigation bar with js (= scrolling) and sidenavigation is open (= margin left on sidenavigation is 350px) my top navigation jumps out of the page.当我使用 js（= 滚动）将粘性 class 添加到我的顶部导航栏并且 sidenavigation 处于打开状态（= sidenavigation 上的边距为 350px）时，我的顶部导航跳出页面。 Is there a way to compensate for this?有没有办法弥补这一点？

Here is my js for fixed top navigation menu when scrolling:这是我在滚动时用于固定顶部导航菜单的 js：

let sectionMain = document.getElementById("section-main");
let navbar = document.getElementById("navbar");
let navPos = navbar.getBoundingClientRect().top;

window.addEventListener("scroll", e => {
  let viewportHeight = window.innerHeight;
  let scrollPos = window.scrollY;
  if (scrollPos > navPos) {
    navbar.classList.add('sticky');
    sectionMain.classList.add('navbarOffsetMargin');
  } else {
    navbar.classList.remove('sticky');
    sectionMain.classList.remove('navbarOffsetMargin');
  }
});

window.addEventListener("scroll", e => {
  let viewportHeight = window.innerHeight;
  let scrollPos = window.scrollY;
  if (scrollPos > navPos) {
    sidenavid.classList.add('sticky');
  } else {
    sidenavid.classList.remove('sticky');
  }
});

CSS for top navigation:顶部导航CSS：

#navbar.sticky {
    position: fixed;
    top: 0;
    box-shadow: 5px -1px 6px 5px #dad7d7;
    clip-path: inset(-5px -5px -200px -0px);
    background-color: #e3f4f1;
    transition: 0.5s;
    z-index: 1000;
}

As mentioned I also have a sidenavigation bar, that is opened/closed (width 0/350px) with a button:如前所述，我还有一个侧边导航栏，它通过一个按钮打开/关闭（宽度 0/350px）：

function toggleNav() {
  var element = document.getElementById("sidenavid");
  if (element.style.width == "350px") {
    element.style.width = "0px";
  } else {
    element.style.width = "350px";
  }
  var element = document.getElementById("main");
  if (element.style.marginLeft == "350px") {
    element.style.marginLeft = "0px";
  } else {
    element.style.marginLeft = "350px";
  }

HTML: HTML：

<body>
    <header>
        <div id="sidenavid" class="sidenavclass">
            <a href="#" class="closeicon">
                <h1 class="h1-top" aria-hidden="true">h1 title</h1>
            </a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
            <a href="#">Menu</a>
        </div>
        <div id="main">
            <nav id="navbar">
                <span onclick="toggleNav()">
                    <div class="navbar-brand">
                        <i onclick="toggleIcon(this)" class="fa fa-bars fa-2x"></i>
                    </div>
                </span>
                <ul class="nav-list" id="navlist">
                    <li class="nav-list-items"><a href="#">Home</a></li>
                    <li class="nav-list-items dropdown"><a href="#">Products</a>
                        <div class="dropdown-content">
                            <a href="#">Product #1</a>
                            <a href="#">Product #2</a>
                        </div>
                    </li>
                    <li class="nav-list-items dropdown"><a href="#">Information</a>
                        <div class="dropdown-content">
                            <a href="#">Courses</a>
                            <a href="#">Tutorials</a>
                        </div>
                    </li>
                    <li class="nav-list-items"><a href="#">Contact</a></li>
                </ul>
            </nav>
            <section id="section-main">
                <div class="article-container">
                    <article class="section-container">
                        <h1>This is the title of the section</h1>
                        <p class="section-text">
                            Here is the main section text in a paragraph tag that is supposed to xyz
                        </p>
                    </article>
                </div>
            </section>
            <section id="section-main">
                <div class="article-container">
                    <article class="section-container">
                        <h1>This is the title of the section</h1>
                        <p class="section-text">
                            Here is the main section text in a paragraph tag that is supposed to xyz
                        </p>
                    </article>
                </div>
            </section>
        </div>
    </header>
    <script src="https://kit.fontawesome.com/9beebcdd4b.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</body>

My top navigation bar does not seem to work with my side bar, as it is pushed out of the viewport when it is scrolling (class sticky is added) and side bar is open (width of sidenav 350px. I tried compensating by adding following if statement to my code, but it does not seem to work as intended.我的顶部导航栏似乎不适用于我的侧边栏，因为它在滚动时被推出视口（添加类粘性）并且侧边栏打开（sidenav 350px 的宽度。我尝试通过添加以下内容进行补偿如果声明我的代码，但它似乎没有按预期工作。

  var element = document.getElementById("navbar");
  if (main.style.marginLeft == "350px" || navbar.classList.contains('sticky')) {
      element.style.width = "calc(100% - 350px)";
    } else {
      element.style.width = "100%";
    }

Here is full jsfiddle: https://jsfiddle.net/louvalman/xf8kwrv9/6/ (site only works in full screen so far) Thanks in advance to anyone willing to help out a newbie!这里是完整的 jsfiddle： https://jsfiddle.net/louvalman/xf8kwrv9/6/ （网站目前只能在全屏模式下工作）提前感谢任何愿意帮助新手的人！

Answer 1

I think it is pretty funny you add a class called sticky but it sets the position value of the #navbar to fixed.我认为添加一个名为 sticky 的 class 非常有趣，但它会将 #navbar 的 position 值设置为 fixed。

If you would set the position to sticky instead of fixed you would already almost get the result that you are after.如果您将 position 设置为 sticky 而不是 fixed，您几乎已经得到了您想要的结果。

The only thing to change is then to add a space between the content of the navbar using justify-content: space-between.唯一需要更改的是使用 justify-content: space-between 在导航栏的内容之间添加一个空格。 You can use this instead of the margin auto on the nav list class you've set.您可以在您设置的导航列表 class 上使用它代替 margin auto。

#navbar {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

#navbar.sticky {
    position: sticky;
    top: 0;
    box-shadow: 5px -1px 6px 5px #dad7d7;
    clip-path: inset(-5px -5px -200px 0px);
    background-color: #e3f4f1;
    transition: 0.5s;
    z-index: 1000;
}

position fixed 加js时导航栏跳到右边，试图用width(calc)补偿，打开侧边导航坏了

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-04 22:48:28

position fixed 加js时导航栏跳到右边，试图用width(calc)补偿，打开侧边导航坏了

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-04 22:48:28

解决方案1
1 已采纳 2022-05-04 22:48:28