Question

我有一个固定位置的图像，我想在滚动页面时淡出。我已经编写了一个相当基本的jQuery脚本来实现这一点，我认为它不是最有效的，因为它在页面滚动时不断轮询。我想知道是否有更有效的方法来实现我想做的事情？

正如我现在编码的那样，我的浏览器在查看页面时基本上使用了40-50％的CPU。

JS：

$(document).ready(function(){
  $(window).scroll(function(){
      if (1-$(window).scrollTop()/200 > -10) {
          $("#icon").css({opacity: 1-$(window).scrollTop()/200});
      }
    });
});

HTML：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  body {
    width: 400px;
    margin: 0 auto;
  }

  #icon {
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -200px;
    z-index: 1;
  }

  #text {
    margin-top: 300px;
    z-index: 50;
    position: relative;
  }
</style>
</head>
<body>
  <div id="icon"><img src="http://placehold.it/400x200" /></div>

  <div id="text">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
</body>
</html>

Answer 1

您认为在窗口scroll上调用该函数是性能问题所在，这是完全正确的。 John Resig撰写的Here's an excellent article讨论了Twitter遇到的类似问题。

正如@ Guy所说，您需要使用setInterval并检查滚动状态。另外，请确保像文章中的John提及的那样缓存您的查询（从文章底部的John的代码中无耻地改编）：

$(document).ready(function(){
  var didScroll = false;
  var icon = $("#icon");
  var $window = $(window);

  $(window).scroll(function(){
      didScroll = true;
  });

  window.setInterval(function () {
    if (didScroll) {
      if (1-$window.scrollTop()/200 > -10) {
          icon.css({opacity: 1-$window.scrollTop()/200});
      }
      didScroll = false;
    }
  }, 50);
});

http://jsbin.com/iwiqe4/6/

我会将间隔调整为仍然看起来不错的最高值（50在我的机器上看起来很好）。我还缓存了事件处理程序内部的所有查询。查询DOM是很昂贵的，并且在每个页面滚动上执行它可能会很快导致问题。

Answer 2

代码看起来很好。

如何使用 setInterval并且每1秒调用一次方法而不是使用滚动触发器？可以削减CPU成本。

jQuery - 滚动页面时淡出元素，滚动回顶部时淡入淡出

2 个答案: