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

我有一个固定位置的图像，我希望在滚动页面时淡出。我已经写了一个相当基本的jQuery脚本来这样做，并且我认为它不是最有效的，因为它在页面滚动中不断轮询。我想知道是否有更有效的方法来实现我想要做的事情？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>

来源

2011-05-20 waffl

您认为在窗口scroll上调用该函数是性能问题所在，您绝对正确。 John Resig的Here's an excellent article谈到了Twitter所具有的类似问题。

由于@Guy说，你会想要使用setInterval并检查滚动状态。另外，还要确保缓存您的查询，如约翰在文章中提到（从约翰的代码无耻地适应在文章的底部）：

$(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代价昂贵，并且在每个页面上滚动都会导致问题迅速发生。

来源

2011-05-20 04:28:30

谢谢你们的帮助！很高兴知道缓存查询呢！ – waffl 2011-05-23 20:44:19

@waffl：没问题，很乐意帮忙。 :) – 2011-05-23 21:06:49

代码看起来不错。

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

来源

2011-05-20 04:15:41 Guy

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

回答

相关问题