Позиционирование элементов в jQuery
В этой статье познакомимся с методами 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. При клике на элемент с id=»mydiv» будем увеличивать его текущие координаты относительно документа на 50px по X и по Y.
Пример 2. При клике на одном из трёх элементов с классом blocks будем:
- у первого элемента (индекс 0 в наборе) увеличивать его Y-координату на 50px;
- у второго элемента (индекс 1 в наборе) увеличивать его X-координату на 50px;
- у третьего элемента (индекс 2 в наборе) увеличивать его X и Y координаты на 50px.
Примечание: Метод position не имеет функционала для установки координат, он может использоваться только для их чтения в соответствии с алгоритмом приведённым выше.
Источник
jQuery position (). top возвращает 0, а не реальное значение
Согласно официальной документации jQuery, эта функция должна:
«Получить текущие координаты первого элемента в наборе соответствующих элементов относительно родительского смещения.»
Ожидается, что следующий код вернет значение 51, но он вернет значение 0. Может ли кто-нибудь объяснить, почему? Заранее спасибо.
Я знаю, что добавление css (top: xx) работает, если так, значит ли это, что position () работает только в том случае, если элемент имеет свойство css top?
3 ответа
Описание API верно. Внутренний элемент имеет (начальное) значение свойства CSS по умолчанию top:auto . Существует margin-top:50px , который, как вы знаете, создает впечатление, что внутренний элемент находится 50px сверху, но это не так. jQuery вернет position().top = 0 , поскольку вершина элемента действительно 0px от родительского элемента.
Чтобы jQuery возвратил ожидаемое значение, используя функцию .position() , вам необходимо расположить внутреннюю
Это оповещение 0, что на 100% правильно, потому что top возвращает значения, отличные от 0, когда вы используете их для позиционирования элемента, но здесь вы используете поля и отступы для позиционирования элемента, поэтому используйте их для получения верхнего расстояния.
Если вы хотите использовать позицию, то сделайте это
А потом делай свое нормальное кодирование
Это вам помогает ?:
Или используйте метод смещения jquery:
Метод .offset () позволяет нам получить текущую позицию элемента относительно документа. Сравните это с .position (), которая возвращает текущую позицию относительно смещения родителя. При размещении нового элемента поверх существующего для глобального манипулирования (в частности, для реализации перетаскивания), .offset () является более полезным.
Источник
JQuery UI Sortable — при изменении position не работает
Здравствуйте! Вот такая проблема у меня нарисовалась: http://testvote.hookahbattle.com/hb/participants/. Все участники перетаскиваются совершенно спокойно в ячейки распределения мест, но стоит прокрутить страницу вниз, чтобы панелька прикрепилась к верху экрана — ничего не работает. Консоль молчит, мониторил стили элементов — тоже не понять, что так сильно не нравится скрипту.
Добавлено через 14 часов 46 минут
Вообще при position:fixed отказывается работать. В чём причина?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не работает jQuery Sortable
Здраствуте, мне нужно сделать вот такую вещь http://jqueryui.com/sortable/#default ,а именно.
jquery.ui sortable
Пишу через codeigniter; Подключил плагин sortable для передвижения строк в таблице в админке(скрин.
JQuery UI sortable, получить id
Доброго времени суток. Суть в следующем: меню с несколькими уровнями вложенности, элементы.
Ограничить создание
JQuery sortable
Здравствуйте. Задача вот в чем. В одну колону вывожу пользователей с БД. В другую нужно.
Реализация jquery .sortable() с сохранением в БД
Здравствуйте, в админке сайте нужно реализовать порядок вывода изображений, через .sortable() от.
JQuery callback при изменении стиля, Реально ли?
Элементу присваивается стиль, напр. $(‘.element’).css(«color»,»white»); возможно ли сделать.
Источник
Частые ошибки новичков при работе с jQuery
На разного рода форумах, я встречал и встречаю однотипные ошибки, которые допускают новички при работе с библиотекой jQuery и из-за которых их код работает не правильно или вообще не работает. Поэтому, я решил написать статью-шпаргалку, которая поможет исправить свои недочеты самостоятельно или избежать ошибок в будущем.
Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах — этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или «Меню» > «Разработка» > «Веб-консоль«. В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или «Меню» > «Дополнительные инструменты» > «Консоль JavaScript«. В Opera — сочетание клавиш аналогичны Chrome, вызов из меню — «Инструменты разработчика» > «Веб-инспектор» («Инструменты разработчика» предварительно включить в пункте «Другие инструменты»). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox
Не подключена библиотека. У кого-то этот пункт вызовет улыбку, но могу вас уверить, что по моей личной статистике, как минимум раз в месяц, на форуме появляется вопрос о том, почему ничего не работает, а после долгих выяснений оказывается, что js-файл с библиотекой просто не подключен на странице. Библиотека jQuery должна быть по возможности новее, подключена первой, до скриптов, в которых она используется и в единственном числе. Если вы используете какой-нибудь старенький плагин, которому для работы требуется такая же старая версия jQuery, то есть несколько нормальных путей решения, чем подключение на страницу и новой библиотеки и старой для плагина:
- Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
- Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
- И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.
Ну, и примерный порядок подключения:
Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге , то его нужно обязательно заключить в такой код:
Это так называемый «обработчик готовности дерева DOM«. Попробую «на пальца» и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге : CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в . Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом
Источник
«Позиция: липкая;» не работает CSS и HTML
Я хочу, чтобы панель навигации прилипала к вершине, как только я ее прокручиваю, но она не работает, и я понятия не имею, почему. Если вы можете помочь, вот мой HTML и CSS код:
Липкое позиционирование — это гибрид относительного и фиксированного позиционирования. Элемент обрабатывается как относительное положение до тех пор, пока он не пересекает заданный порог, после чего он рассматривается как фиксированное положение.
.
Вы должны указать пороговое значение с , по меньшей мере , один из top , right , bottom или left для липких позиционирования вести себя , как ожидалось. В противном случае он будет неотличим от относительного позиционирования. [ источник: MDN ]
Так что в вашем примере вы должны определить позицию, в которой он должен оставаться в конце, используя top свойство.
Проверьте, не установлен ли элемент-предок переполнения (например overflow:hidden ); попробуйте переключить это. Возможно, вам придется подняться на дерево DOM выше, чем вы ожидаете =).
Это может повлиять на ваш position:sticky элемент-потомок.
У меня та же проблема, и я нашел ответ здесь .
Если ваш элемент не придерживается ожидаемого, первое, что нужно проверить, это правила, применяемые к контейнеру.
В частности, ищите любое свойство переполнения, установленное на родительском объекте. Вы не можете использовать : overflow: hidden , overflow: scroll или overflow: auto на родителя position: sticky элемента.
Еще несколько вещей, с которыми я столкнулся:
Когда ваш липкий элемент является компонентом (угловым и т. Д.)
Если сам «липкий» элемент является компонентом с пользовательским селектором элементов, таким как названный угловой компонент, вам необходимо добавить следующее в css компонента:
В частности, Safari для iOS требует display:block даже корневого элемента app-root углового приложения или не будет зависать.
Если вы создаете компонент и определяете CSS внутри компонента (теневой DOM / инкапсулированные стили), убедитесь, что position: sticky он применяется к «внешнему» селектору (например, app-menu-bar в devtools должно отображаться закрепленное положение), а не верхний уровень div внутри компонент. С Angular это может быть достигнуто с помощью :host селектора в CSS для вашего компонента.
Другой
Если элемент, следующий за вашим липким элементом, имеет сплошной фон, вы должны добавить следующее, чтобы он не скользил снизу:
Ваш липкий элемент должен быть первым (перед вашим контентом), если вы используете top и после него при использовании bottom .
Есть осложнения при использовании overflow: hidden вашего элемента-обертки — в общем, это убьет липкий элемент внутри. Лучше объяснил в этом вопросе
Мобильные браузеры могут отключать элементы с фиксированным или фиксированным расположением, когда отображается экранная клавиатура. Я не уверен в точных правилах (кто-нибудь когда-либо знает), но когда клавиатура видна, вы смотрите на своего рода «окно» в окно, и вы не сможете легко заставить вещи придерживаться фактическая видимая верхняя часть экрана.
Убедитесь, что у вас есть:
Проблемы с юзабилити
- Будьте осторожны, если ваш дизайн требует приклеивать вещи к нижней части экрана на мобильных устройствах. На iPhone X, например, они отображают узкую линию, чтобы указать область прокрутки (чтобы вернуться на домашнюю страницу) — и элементы внутри этой области не кликабельны. Поэтому, если вы что-то вставите, обязательно протестируйте на iPhone X, чтобы пользователи могли его активировать. Большая кнопка «Купить сейчас» бесполезна, если люди не могут нажать на нее!
- Если вы размещаете рекламу на Facebook, веб-страница отображается в элементе управления «просмотр веб-страниц» в мобильных приложениях Facebook. Особенно при отображении видео (где ваш контент начинается только в нижней половине экрана) — они часто полностью портят липкие элементы, помещая вашу страницу в прокручиваемое окно просмотра, которое фактически позволяет вашим липким элементам исчезать с верхней части страницы. Обязательно протестируйте в контексте реальной рекламы, а не только в браузере телефона или даже в браузере Facebook, которые могут вести себя по-разному.
Источник
