javascript - 删除类时CSS过渡不起作用

我想在滚动时添加固定的标题，并且想在添加/删除类时添加一个过渡。当前，仅当添加类时，动画才起作用。

$(window).scroll(function() {
      var scroll = $(window).scrollTop();

      if (scroll >= 800) {
          $(".nav").addClass("sticky");
      } else {
        $(".nav").removeClass("sticky");
      }
    });

.nav {
  font-weight: 600;
  text-transform: uppercase;
  transition: all 400ms ease;

  &__link {
    text-decoration: none;
    color: white;

    &:not(:last-child) {
      margin-right: 6rem;
    }
  }
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem 0;
  width: 100%;
  z-index: 1;
  text-align: center;
  background: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
        <a href="#" class="nav__link">Home</a>
        <a href="#" class="nav__link">About us</a>
        <a href="#" class="nav__link">Menu</a>
        <a href="#" class="nav__link">Drinks</a>
        <a href="#" class="nav__link">Reservations</a>
      </nav>

最佳答案

在您的CSS中，position，text-align等属性不支持过渡，因此我将这些属性从css中移出，现在通过js注入有/无延迟。另外，我在导航中应用了position:absolute并将其对齐在主体顶部。它通常表现为浮动块元素。可能是您必须为procedure元素应用上边距以避免重叠。如果可以，您可以尝试以下示例。 <div class="spacer"></div>是使页面可滚动的虚拟元素。

$(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 800) {
        $(".nav").css({
            'position': 'fixed',
            'text-align': 'center'
        });
        $(".nav").addClass("sticky");
    } else {
        $(".nav").removeClass("sticky");
        setTimeout(function (){
            $(".nav").css({
                'position': 'static',
                'text-align': 'left'
            });
        },400);
    }
});

.nav {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 400ms ease;

    &__link {
        text-decoration: none;
        color: white;

        &:not(:last-child) {
            margin-right: 6rem;
        }
    }
}

.sticky {
    padding: 1rem 0;
    width: 100%;
    z-index: 1;
    text-align: center;
    background: #ccc;
    position: fixed;
}
.spacer{
    width: 100%;
    height: 2000px;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
    <a href="#" class="nav__link">Home</a>
    <a href="#" class="nav__link">About us</a>
    <a href="#" class="nav__link">Menu</a>
    <a href="#" class="nav__link">Drinks</a>
    <a href="#" class="nav__link">Reservations</a>
</nav>
<div class="spacer"></div>