Question

在调整窗口大小后打开固定的菜单列表后，菜单按钮位置出现问题（按钮不跟随菜单位置）。调整窗口大小后，计算其位置肯定有问题（当然，刷新页面后，它可以正常工作）。

按钮和菜单（高度：100vh）应固定在位置（在引导栏的右侧）。该按钮必须始终位于菜单右侧。我只是不知道如何正确使用调整大小功能来根据菜单反复检查按钮的位置，因此在关闭菜单并再次打开它以及在打开菜单并调整窗口大小的同时，始终可以看到粘贴在该按钮上。 / p>

我在代码笔上放置了带有更多注释的代码： https://codepen.io/ilonu/pen/BezRKa

<header>

   <div class="fixed-top">
        <div class="container">
          <div class="row">
            <div class="col">
              <button class="hamburger-btn" id="hamburgerBtn">
                  <span class="menu-name">Menu</span>
              </button>
            </div>
          </div>
        </div>
   </div>

   <div class="menu-wrapper">
     <ul>
       <li>Menu item 1</li>
       <li>Manu item 2</li>
       <li>Menu item 3</li>
     </ul>
  </div>

</header>

.header {
    min-height: 100px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.fixed-top {
    position: fixed;
    height: 80px;
        width: 100%;
    left: 50%;
        top: 20px;
    transform: translate(-50%);
}

.fixed-top .row {
    height: 100%;
}

.fixed-top .col {
    height: 100%; 
    position: relative;
}

/* hamburger menu ---------------------------------*/
.hamburger-btn {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 15px;
}

.hamburger-btn.is-active {
    background-color: grey;
}


/* Menu list ---------------------------- */
.menu-wrapper {
    height: 100vh;
    position: fixed;
    width: 400px;
        right: -400px;
        top: 0;
    bottom: 0;

        background-color: yellow;
}

.menu-active {
    right: 0!important;
}


/* Media queries ----------------- */
@media (max-width: 767px) {
    .hamburger-btn {
        width: 50px;
        height: 50px;
    }
    .menu-wrapper {
        width: 320px;
        right: -320px;
    }

}

@media (max-width: 375px) {
    .menu-wrapper {
        width: 265px;
        right: -265px;
    }

}

const hamburger = document.getElementById('hamburgerBtn');
const menuTop = document.querySelector('.menu-wrapper');

var defaultviewportWidth = Math.max(document.documentElement.clientWidth);


function getButtonPosition() {

    const viewportWidth2 = Math.max(document.documentElement.clientWidth);
        const buttonCoordinates = hamburger.getBoundingClientRect();
        const menuCoordinates = menuTop.getBoundingClientRect();
        const menuWidth = menuCoordinates.width;
        const defaultBtnPosition = buttonCoordinates.right;
        const BtnPositionRight = (viewportWidth2 - defaultBtnPosition);
        const ButtonOffsetRight = menuWidth - BtnPositionRight;

        return ButtonOffsetRight;
};


var position = getButtonPosition();


function showMenu() {

    menuTop.classList.toggle('menu-active');
    hamburger.classList.toggle('is-active');

    if (hamburger.classList.contains('is-active')) {
        hamburger.style.right = position + 15 + 'px';
    }
    else {
      // this is 'default' button position inside bootstrap .col
        hamburger.style.right = '15px';
    }
}

hamburger.addEventListener('click', showMenu);

// with resizing the window i wanted to update position values
    $( window ).resize(function() {
      defaultviewportWidth = Math.max(document.documentElement.clientWidth);
      getButtonPosition();
    });

任何提示，我将不胜感激！

调整窗口大小后更改菜单按钮位置的问题

0 个答案: