position fixed 加js時導航欄跳到右邊，試圖用width(calc)補償，打開側邊導航壞了

Question

我在一個小網站上工作，在那里我試圖了解不同的導航菜單如何與 html、css 和 js 相互交互。 我的問題是我的頂部導航欄無法與側邊欄導航正確交互。 當我使用 js（= 滾動）將粘性 class 添加到我的頂部導航欄並且 sidenavigation 處於打開狀態（= sidenavigation 上的邊距為 350px）時，我的頂部導航跳出頁面。 有沒有辦法彌補這一點？

這是我在滾動時用於固定頂部導航菜單的 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：

#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;
}

如前所述，我還有一個側邊導航欄，它通過一個按鈕打開/關閉（寬度 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：

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

我的頂部導航欄似乎不適用於我的側邊欄，因為它在滾動時被推出視口（添加類粘性）並且側邊欄打開（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%";
    }

這里是完整的 jsfiddle： https://jsfiddle.net/louvalman/xf8kwrv9/6/ （網站目前只能在全屏模式下工作）提前感謝任何願意幫助新手的人！

Answer 1

我認為添加一個名為 sticky 的 class 非常有趣，但它會將 #navbar 的 position 值設置為 fixed。

如果您將 position 設置為 sticky 而不是 fixed，您幾乎已經得到了您想要的結果。

唯一需要更改的是使用 justify-content: space-between 在導航欄的內容之間添加一個空格。 您可以在您設置的導航列表 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