Шпион за скроллом - часть № 1

В данном уроке Вы узнаете как с помощью MooTools создать интересный эффект, который запускается только после того, как пользователь прокрутит страницу вниз.

Это первая часть из серии уроков, которые расскажут про этот замечательный от Девида Волша - ScrollSpy.

demosourse

Начнем, пожалуй! :)

Все основное происходит между тегами <head></head>. Сюда нам и необходимо поместить львиную часть кода:

<script type="text/javascript" src="mootools-1.2.2.js"></script>
 <script type="text/javascript">
      
      /* scroll spy plugin / class */
      var ScrollSpy = new Class({
  
      /* implements */
      Implements: [Options,Events],
  
      /* options */
      options: {
      min: 0,
      mode: 'vertical',
      max: 0,
      container: window,
      onEnter: $empty,
      onLeave: $empty,
      onTick: $empty
      },
  
      /* initialization */
      initialize: function(options) {
      /* set options */
      this.setOptions(options);
      this.container = $(this.options.container);
      this.enters = this.leaves = 0;
      this.max = this.options.max;
  
      /* fix max */
      if(this.max == 0) 
      { 
      var ss = this.container.getScrollSize();
      this.max = this.options.mode == 'vertical' ? ss.y : ss.x;
      }
      /* make it happen */
      this.addListener();
      },
  
      /* a method that does whatever you want */
      addListener: function() {
      /* state trackers */
      this.inside = false;
      this.container.addEvent('scroll',function() {

      /* if it has reached the level */
      var position = this.container.getScroll();
      var xy = this.options.mode == 'vertical' ? position.y : position.x;
      /* if we reach the minimum and are still below the max... */
      if(xy >= this.options.min && xy <= this.max) {
      /* trigger Enter event if necessary */
      if(!this.inside) {
      /* record as inside */
      this.inside = true;
      this.enters++;
      /* fire enter event */
      this.fireEvent('enter',[position,this.enters]);
      }
      /* trigger the "tick", always */
      this.fireEvent('tick',[position,this.inside,this.enters,this.leaves]);
      }
      else {
      /* trigger leave */
      if(this.inside) 
      {
      this.inside = false;
      this.leaves++;
      this.fireEvent('leave',[position,this.leaves]);
      }
      }
      }.bind(this));
      }
      });
  </script>
  <script type="text/javascript">
      window.addEvent('domready',function() {
      /* smooth */
      new SmoothScroll({duration:500});
  
      /* link management */
      $('gototop').set('opacity','0').setStyle('display','block');
  
      /* scrollspy instance */
      var ss = new ScrollSpy({
      min: 200,
      onEnter: function(position,enters) {
      //if(console) { console.log('Entered [' + enters + '] at: ' + position.x + ' / ' + position.y); }
      $('gototop').fade('in');
      },

      onLeave: function(position,leaves) {
      //if(console) { console.log('Left [' + leaves + '] at: ' + position.x + ' / ' + position.y); }

      $('gototop').fade('out');
      },
      onTick: function(position,state,enters,leaves) {
      //if(console) { console.log('Tick  [' + enters + ', ' + leaves + '] at: ' + position.x + ' / ' + position.y); }
      },
      container: window
      });
      });
  </script>

Вначале подключаем фреймворк, далее функцию СкроллСпай, а далее придаем ей необходимую функциональность. Жирным выделено значение в пикселях, которое запускает функцию показа ссылки (т.е. как только пользователь опускает прокрутку более чем на 200 пикселей - происходит реакция).

Теперь давайте немного приукрасим нашу ссылку:

<style type="text/css">
		#gototop			{ display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:280px; background:url(add_content_spr.gif) 5px -8px no-repeat #eceff5; color:#3b5998; font-size:11px; text-decoration:none; position:fixed; right:5px; bottom:5px; padding:7px 7px 7px 20px; }
		#gototop:hover	{ text-decoration:underline; }
	</style>

И в самом конце давайте поместим эту ссылку куда-либо в документ:

<a href="#top" id="gototop" class="no-click no-print">Поднимите меня на самый верх, пожалуйста!!!</a></h1>

Также не забываем применить якорь "#top" к какому-нибудь элементу в самом верху страницы. Это необходимо, чтоб скрипт знал куда подниматься.

В демо это выглядит так:

<h1><a name="top" id="top"></a>Воспользуйтесь</h1>

На сегодня все! Всего хорошего, уважаемые посетители!!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.davidwalsh.name
Перевел: Максим Шкурупий
Урок создан: 27 Мая 2009
Просмотров: 29468
Правила перепечатки

5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

    Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

^ Наверх ^