向上滚动时，动画粘贴标题不会平滑动画

Question

此粘性菜单将标题（徽标）设置为左侧，导航设置为右侧。当你向下滚动时，动画是平滑的但是当你向上滚动时导航有点跳跃，而不是标题。

动画使用 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

当他们的祖先有一个＆＃34;粘贴＆＃34;时，您的CSS transition仅适用于标题链接 。类。因此，当删除该类时，不会应用转换。

将转换应用于<a>元素，而不用＆＃34;粘贴＆＃34;课程，就像你使用<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 { ... }

以下演示：

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;