> 高度的平滑滚动效果（视差效果）答案

【问题标题】：Smooth scrolling effect for > Height (parallax effect)> 高度的平滑滚动效果（视差效果）
【发布时间】：2016-12-14 19:26:50
【问题描述】：

我正在寻找视差效果。喜欢这个scroll effect。

我只有这个

HTML

<nav class="menu">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
    </ul>
</nav>

jQuery

$(window).bind('scroll', function () {
        if ($(window).scrollTop() > 80) {
            $('.menu').addClass('fixed');
        } else {
            $('.menu').removeClass('fixed');
        }
    });

我想要一个更平滑的效果，当我 > 80px 时，就像提到的滚动效果一样。

【问题讨论】：

旁注：从 jQuery 3.0 开始，.bind() 已被弃用。它被 .on() 方法取代
我使用的是 query-1.12.4，但最好升级吗？
@Homme 不要升级。其中许多都不起作用。
只有在您不想浪费时间重做代码或需要更新版本的情况下才升级，自 1.12.4 以来发生了很多变化。
我不介意，但我怎样才能修改它使其更流畅？

标签： javascript jquery

【解决方案1】：

我使用 CSS Transitions 和 jQuery 做了一个类似的原型，以获得更好的平滑效果。请检查一下。 CSS 过渡由 GPU 执行，而 jQuery 过渡则使用 CPU 和数学计算。所以肯定会看起来很慢。

另外，我使用了相同的 jQuery 版本（或多或少），因此您不需要弄乱这些版本。 :)

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 20)
      $(".scrolled").addClass("show");
    else
      $(".scrolled").removeClass("show");
  });
});

* {margin: 0; padding: 0; list-style: none; line-height: 1;}

body {font-family: 'Segoe UI';}

header {line-height: 5; text-align: center; -webkit-transition: all 0.5s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear;}
header.scrolled {line-height: 3; border-bottom: 2px solid #ccc; background-color: #fff; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 999;}
header.scrolled.show {height: 3em;}

.first {background-color: #ccf; position: relative; top: 0; left: 0; right: 0; height: 100%; margin-bottom: 1300px; z-index: 1;}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<header class="scrolled">
  Scrolled Header
</header>
<div class="first">
  <header class="normal">
    Normal Header
  </header>
</div>

【讨论】：