jquery - 向上滚动时，动画粘性听到的动画效果不流畅

Question

这个粘性菜单将标题( Logo )动画化到左侧，导航到右侧。向下滚动时动画很流畅，但向上滚动时导航有点跳动，不像标题。

动画是用CSS3完成的:

transition: all 0.4s ease;

JQuery 仅用于添加类:

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});

我想问题出在 css 上，但无法弄清楚它是什么。 <强> Jsfiddle here 。有什么帮助吗？谢谢。

Answer 1

你的 CSS transition 仅在其祖先具有“​​粘性”类时应用于标题链接。因此，当删除该类时，不会应用转换。

将转换应用于 <a> 没有“粘性”类的元素，就像您对 <h1> 所做的那样.

取而代之的是:

nav ul li a { ... }

.sticky nav ul li a {  
  ...
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

这样做:

nav ul li a {
  ...
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.sticky nav ul li a { ... }

演示如下:

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('header').addClass("sticky");
  } else {
    $('header').removeClass("sticky");
  }
});

body {
  line-height: 1;
  font-family: 'PT Sans', sans-serif;
  margin: 0;
}
ol,
ul {
  list-style: none;
}
img {
  max-width: 100%;
}
/* NAV */

header {
  position: fixed;
  width: 100%;
  background: #335C7D;
}
header h1 {
  font-size: 40px;
  color: #fff;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.sticky h1 {
  font-size: 25px;
}
.logo {
  float: left;
  display: block;
  padding: 20px;
}
nav ul {
  float: right;
  position: relative;
  top: 30px;
  right: 20px;
}
nav ul li {
  float: left;
}
nav ul li a {
  padding: 10px;
  font-size: 30px;
  text-decoration: none;
  color: #fff;
  display: block;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.sticky nav ul li a {
  font-size: 20px;
  position: relative;
  top: -5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <span class="logo">
    <h1>Sticky Header</h1>
  </span>

  <nav>
    <ul>
      <li><a href="#">Page 1</a>
      </li>
      <li><a href="#">Page 2</a>
      </li>
      <li><a href="#">Page 3</a>
      </li>
    </ul>
  </nav>
</header>

<!-- an image for demonstration purposes -->
<img src="http://netdna.webdesignerdepot.com/uploads7/how-to-create-an-animated-sticky-header-with-css3-and-jquery/large-image.jpg" alt="Big Image" />