Question

我正在寻找视差效果。像这样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');
        }
    });

当我＆gt;我想要更平滑的效果80px，就像上面提到的滚动效果一样。

Answer 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>

<>的平滑滚动效果高度（视差效应）

1 个答案: