向上滚动时听到的动画粘滞动画不流畅答案

【问题标题】：Animated sticky heard doesn't animate smoothly when scrolling up向上滚动时听到的动画粘滞动画不流畅
【发布时间】：2015-04-08 01:36:15
【问题描述】：

这个粘性菜单使左侧的标题（徽标）和右侧的导航动画。当你向下滚动时，动画很流畅，但当你向上滚动时，导航有点跳跃，不像标题。

动画是用 CSS3 完成的：

transition: all 0.4s ease;

JQuery 仅用于添加类：

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

我猜问题出在 css 上，但不知道是什么问题。 Jsfiddle here。有什么帮助吗？谢谢。

【问题讨论】：

尝试将字体大小排除在等式之外并仅进行变换（缩放），CSS 在这方面非常擅长，但对于必须重新计算位置和像素流的动画来说不太好。

标签： jquery css

【解决方案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" />

【讨论】：

该死的你打败了我！