Материал из JQuery
| $(«div.content»).offset() | возвратит координаты первого div-элемента с классом content, относительно начала страницы. |
| $(«div.content»).position() | возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием. |
| $(«.content»).offset( |
устанавливает координаты относительно начала страницы, равные (100, 30) для всех элементов с классом content. |
Замечание 1: при изменении координат с помощью функции offset, все выбранные элементы, у которых не задан тип позиционирования (то есть position = static), автоматически изменят позиционирование на относительное (relative).
Замечание 2: важно отметить, что используя метод .offset() вы получите позицию только первого элемента из всех выбранных. Если вам нужны значения координат всех элементов, то следует использовать конструкции типа .map() или .each().
В действии
Первый элемент из списка опустим на 30 пикселей.
В этой статье познакомимся с методами jQuery (offset и position), предназначенными для определения положения элемента на странице.
Методы offset и position
В jQuery определить положение элемента на странице можно посредством методов offset() и position() .
Первый метод ( offset ) позволяет узнать положение элемента относительно левого верхнего угла страницы (объекта document ). Второй же метод ( position ) выполняет это относительно левого верхнего угла ближайшего предка, который расположен вне основного потока (т.е. имеет в качестве значения свойства position значение absolute , fixed , relative или sticky ). Если же у элемента нет такого предка, они все располагаются в нормальном потоке, то его положение будет рассчитываться аналогично тому, как это выполняет метод offset() , т.е. относительно верхнего левого угла страницы.
В качестве результата данные методы возвращают объект, содержащий два свойства:
- top – положение относительно верхней границы документа или ближайшего предка;
- left – положение относительно левой границы документа или ближайшего предка.
Примечание: Если выборка содержит несколько элементов, то методы offset и position возвращают текущие координаты только для первого из них.
Установка координат
Кроме этого метод offset позволяет также установить координаты. Осуществляет это он относительно левого верхнего угла страницы (объекта document ) для всех элементов текущего набора.
Установка координат осуществляется посредством указания одного из следующих значений в качестве параметра:
- объекта, содержащего свойства left и top ;
- функции, которая в качестве результата должна возвращать объект со свойствами left и top (в качестве аргументов ей передаются индекс текущего элемента в выбранном наборе и текущие координаты этого элемента в виде объекта).
Рассмотрим как осуществляется установка координат с помощью следующих примеров.
Пример 1. При клике на элемент с будем увеличивать его текущие координаты относительно документа на 50px по X и по Y.
Пример 2. При клике на одном из трёх элементов с классом blocks будем:
- у первого элемента (индекс 0 в наборе) увеличивать его Y-координату на 50px;
- у второго элемента (индекс 1 в наборе) увеличивать его X-координату на 50px;
- у третьего элемента (индекс 2 в наборе) увеличивать его X и Y координаты на 50px.
Примечание: Метод position не имеет функционала для установки координат, он может использоваться только для их чтения в соответствии с алгоритмом приведённым выше.
С каждым днем сайты становятся все сложнее, а дизайнеры придумывают все новые способы привлечь внимание посетителей — и это правильно, ведь удивить становится все труднее. Именно поэтому в последнее время на многих сайтах присутствует анимация и различные эффекты. Но нас сегодня интересует немного другая тема: как определить, виден ли сейчас элемент на экране или нет? И если виден, то сделать какое-нибудь действие. Например перекрасить его в другой цвет. Сайт может быть длинным и если вы назначите анимацию при загрузке страницы, вероятность того, что пользователь ее увидит — очень мала — нужно запускать ее в тот момент, когда элемент появился на странице. Давайте научимся это делать.
Для начала создадим небольшую разметку, с помощью которой мы будем проводить свои эксперименты:
Одна обертка и один блок. Добавим немного стилей:
Как видите, мы задали высоту обертке и поставили блок по центру — при загрузке страницы его не видно. И заранее описали класс green при котором заливка блока станет зеленой.
Давайте попробуем перекрасить блок, как только он целиком попадет в область видимости экрана.
Для этого напишем следующий скрипт:
Я немного забежал вперед и предусмотрел наличие на странице сразу множества элементов, поэтому использовал each. Что делает скрипт: при скролле страницы он пробегает все элементы и проверяет, что расстояние до них + их высота меньше расстояния, которое пользователь пролистал + высота окна. Как только условие нарушается, срабатывает скрипт — в нашем случае он добавляет класс green.
Если вам нужно многократное повторение действия (отмена действия если элемент скроется и повтор — если опять появится), достаточно просто дописать условие else.
Если блок по высоте больше высоты экрана
Если блок очень высокий, то он целиком не поместится в экран, а значит что скрипт выполнится поздно. Для такого случая давайте немного модифицируем скрипт. Будем выполнять действие, когда до верха страницы будет оставаться 100px.
Немного обновим стили:
И теперь сам модифицированный скрипт:
В скрипте мы выполняем проверку — если элемент больше чем высота экрана, то скрипт сработает, когда до верха останется 100px, в противном случае сработает по «старой» схеме.
Действие по центру экрана
А что если действовать нужно в тот момент, когда элемент находится ровно по центру экрана? И для такого случая найдется свой скрипт:
