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 - 滾動頁面時淡出元素，淡入滾動時返回頂部

回答

相關問題