我有一个固定位置的图像，我想在滚动页面时淡出该图像。我已经编写了一个相当基本的 jQuery 脚本来执行此操作，我想它不是最有效的，因为它在页面滚动时不断轮询。我想知道是否有更有效的方法来实现我想要做的事情？
正如我现在编码的那样，我的浏览器在查看页面时基本上使用了 40-50% 的 CPU。
目前我的工作方式如下:http://jsbin.com/iwiqe4/2
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>
最佳答案
您认为在窗口滚动上调用该函数是性能问题所在，这是绝对正确的。 Here's an excellent article John Resig 的文章谈到了 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);
});
我会将间隔调整为看起来仍然不错的最高值(50 在我的机器上看起来不错)。我还缓存了事件处理程序内部的所有查询。查询 DOM 的成本很高，并且在每个页面滚动时执行此操作可能会很快导致问题。
关于jQuery - 滚动页面时淡出元素，滚动回顶部时淡入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6067215/