滚动上的粘性导航，从中心扩展导航宽度

Question

我有一个滚动的粘性导航栏，当导航栏“粘性”时我想做两件事：

• 我想将导航宽度从中心扩大到 100vw（或 100%），但我不知道该怎么做 我试过这个：

.fixed-nav{
   position:fixed;
   top:0;
   width:100vw;
}

• 我还希望将导航定位在顶部 0

所以我尝试了一些东西，这就是我得到的，但是正如你所看到的，导航宽度没有从中心扩展，当导航定位到顶部 0 时，我真的不想要一个动画：https://jsfiddle.net/Kiiara/65txkcyv/6/

Answer 1

尽管您的代码非常混乱。尝试为您的 2 个 CSS 选择器使用以下代码：

header{
    position:absolute;
    top:54px;
    left:0;
    right:0;
    margin:auto;
    transition: .3s;
    z-index:500;
    transform-origin: center;
    transform: scaleX(0.95);
}

.heightHeader{
    position:fixed;
    top:0;
    width:100vw;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
    transform: scale(1);
}

Answer 2

1. 动画是因为transition 在这段代码中解决的。我已经删除了所有动画，因为你说你不想要它。
   
2. tranform-origin 将从 center 扩展宽度。
3. 无需更改nav class，因为您已经在更改 header
4. 以整页模式查看结果。

// Sticky nav on scroll
const header = document.querySelector('header');
const nav = document.querySelector('#main');

const topOfNav = header.offsetTop;
function stickyNav() {
  if (window.scrollY >= topOfNav) {
    // Navbar's height
    header.classList.add('heightHeader');

  } else {
    header.classList.remove('heightHeader');
  }
}

window.addEventListener('scroll', stickyNav);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

header {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  margin: auto;
  width: 95vw;
  transform-origin: center;
  z-index: 500;
}

.heightHeader {
  position: fixed;
  top: 0;
  width: 100vw;
  transform-origin: center;

}

nav#main {
  height: 120px;
  box-shadow: 0px 15px 30px #0000001A;
  border-radius: 15px;
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
}

.fixed-nav .nav__menu {
  margin-left: auto;
}

nav#main .nav__logo {
  margin-left: 50px;
}

.nav__menu {
  margin-left: auto;
  display: flex;
}

.nav__menu .main-menu-item {
  position: relative;
}

.main-menu-item:not(:last-child) {
  margin: 0 44px;
}

.main-menu-item:last-child {
  margin-left: 44px;
  margin-right: 342px;
}

.main-menu-item a {
  font-weight: lighter;
  font-size: 14px;
  letter-spacing: 2.8px;
}

section div {
  height: 400px;
  width: 300px;
  background: skyblue;
}

<header>
      <nav id="main">
        <div class="nav__logo"><a href="#">LOGO</a></div>

        <ul class="nav__menu">
          <li class="main-menu-item"><a href="#">One</a></li>
          <li class="main-menu-item"><a href="#">Two</a></li>
          <li class="main-menu-item"><a href="#">Three</a></li>
          <li class="main-menu-item"><a href="#">Four</a></li>
          <li class="main-menu-item"><a href="#">Five</a></li>
        </ul>

      </nav>
    </header>

    <section>
      <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est maiores debitis vel quam assumenda sunt harum, repellendus magnam in libero eveniet quibusdam soluta nobis molestias! Voluptates temporibus eius veritatis. Id.
        Eius nesciunt iure earum, assumenda aliquid aut! Quasi animi esse repudiandae sint ullam iusto inventore vero fugit officiis magni tempora, optio accusantium nobis libero, hic aspernatur impedit sapiente veniam numquam?
        Ex fugiat expedita hic id. Quibusdam assumenda natus, totam cum eos veniam esse! Officia, magnam itaque quisquam rem maxime eius voluptatem facilis quas, quidem est, eaque optio corporis exercitationem voluptate!
        Esse, modi? Eligendi eum, magni sunt voluptates dolor vel sapiente asperiores obcaecati similique eius nulla iste eveniet neque natus possimus inventore quas nobis alias assumenda excepturi? Repudiandae deleniti voluptatem dicta.
        Accusamus impedit quasi at autem eos, molestiae beatae mollitia. Magnam labore ea quis facilis. A cupiditate minus, error maxime ullam fugiat quam numquam dicta quidem tempore labore veniam optio magnam?
        Odio ullam perspiciatis qui recusandae officiis voluptatibus nisi dolore ad sequi maxime, iusto nostrum assumenda, repellendus est ab quas soluta dolorem, voluptate quam eos delectus. Laborum, laboriosam harum. Pariatur, aspernatur!
        Deleniti commodi illum minima dolorum animi. Qui, exercitationem architecto sunt molestiae assumenda, reiciendis quaerat at iusto earum nulla porro officia? Animi possimus, tempore maxime libero esse labore quam minima ipsa?
        Totam earum illo molestias inventore unde veritatis officia, quia modi impedit nisi odio ducimus voluptatibus itaque explicabo est neque accusamus fuga, laudantium autem debitis nulla minus ab? Nesciunt, natus fugiat.
        Perspiciatis suscipit obcaecati veniam in praesentium earum repellat iste amet fuga voluptate, nesciunt, quisquam necessitatibus molestiae natus rerum itaque incidunt. Officiis consectetur voluptatem non beatae sequi inventore nihil adipisci iure!
        Provident ab excepturi alias aperiam tempora dignissimos nostrum, maxime debitis atque. Vero unde libero aut sint doloribus deleniti rem sed beatae maxime dolore laboriosam veniam maiores, natus quod facere molestias!
        Accusantium tempore voluptate corporis non voluptatibus, necessitatibus quas, nemo quos officiis accusamus impedit repudiandae sunt consequatur recusandae blanditiis vel atque sequi quis deserunt explicabo tenetur labore qui commodi. In, inventore!
        Maiores mollitia asperiores non provident. Nisi quas unde vel aliquam odit eos nesciunt nostrum dignissimos harum tempore magnam saepe iusto inventore ullam aut similique nam nobis, quia impedit ipsam beatae.
        Enim sed ducimus molestias debitis accusantium, sint laboriosam minima perferendis corrupti dolorum consequatur voluptatem ab aspernatur numquam consectetur temporibus quo nesciunt quam aliquid. Itaque cumque voluptate quos minima illo cum!
        Cumque autem labore aut ipsam repellendus vero eaque eligendi? Cupiditate perferendis quos at aliquid deleniti. Incidunt temporibus aut, officiis nam deleniti quisquam labore autem dolorum unde illum perspiciatis rerum quod!
        Harum, eveniet repellendus dicta, quod nesciunt natus maxime rem in, ab expedita exercitationem modi. Laudantium, minus reiciendis cum, dolorum distinctio tempore aliquam quidem dicta doloribus rerum sequi sunt pariatur voluptas?
        Distinctio ullam debitis, aliquam hic vitae aut doloribus provident sint soluta expedita repudiandae, et qui, earum omnis impedit perferendis. Hic omnis ab blanditiis ea ad nesciunt cupiditate laudantium adipisci aliquid.
        Culpa iusto, quam repudiandae sapiente reiciendis, nulla, quod quisquam quidem excepturi saepe dolorum velit est ex vero ipsam? Exercitationem architecto assumenda aliquam sequi dolore excepturi facere repellat animi ab magni.
        Eum provident culpa, ut natus, minus sequi, nobis illo sit quia corporis architecto! Iure atque culpa sint, ratione libero pariatur nemo, quidem dolorem, deleniti numquam cupiditate explicabo accusamus maiores eligendi?
        Nobis, eos porro quod neque adipisci explicabo quo fugit modi veniam mollitia delectus, ipsam illum? Facere qui magni officiis voluptas voluptate tempora recusandae reiciendis dolore sequi officia, harum laboriosam at.
        Cumque beatae, consectetur voluptate eligendi quaerat, esse labore obcaecati, quisquam dolor deserunt mollitia tempora. Cum, voluptatum? Veniam, iusto repellat. Quo aliquid perferendis quasi nisi consequuntur explicabo ut dolorem exercitationem perspiciatis!</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>

Answer 3

如果您像这样更改 .header 和 heightHeader 转换选项

-webkit-transition: width 0.8s ease;
-moz-transition: width 0.8s ease;
-ms-transition: width 0.8s ease;
transition: width 0.8s ease;

您只会为width 属性设置动画，并且容器将从中心展开，您将避免top 的动画。平滑度问题始于设置为margin-left: auto 的菜单所在的位置。根据我的经验，您无法为 auto 属性设置动画。