jQuery - затухание элемента при прокрутке страницы, затухание при прокрутке вверх - PullRequest
Новая
       16

jQuery - затухание элемента при прокрутке страницы, затухание при прокрутке вверх

2 голосов
/ 20 мая 2011

У меня есть изображение с фиксированной позицией, которое я хотел бы исчезнуть при прокрутке страницы. Для этого я написал довольно простой скрипт jQuery, и я думаю, что он не самый эффективный, потому что он постоянно опрашивает прокрутку страницы. Мне было интересно, есть ли более эффективный способ добиться того, что я пытаюсь сделать?

Как у меня сейчас написано, мой браузер использует в основном 40-50% ЦП при просмотре страницы.

В настоящее время у меня это работает так: 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>

Ответы [ 2 ]

3 голосов
/ 20 мая 2011

Вы абсолютно правы, полагая, что при вызове этой функции в окне scroll возникают проблемы с производительностью. Вот отличная статья Джона Резига , в которой говорится о схожей проблеме, с которой столкнулся 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 стоит дорого, и выполнение его при каждой прокрутке страницы может быстро вызвать проблемы.

0 голосов
/ 20 мая 2011

код выглядит нормально.

как насчет использования setTimeInterval и вызов метода каждую 1 секунду вместо использования триггера прокрутки? может сократить стоимость процессора.

...