Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2019, 22:11
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Получение координат элемента с position: sticky
Когда элемент с position: sticky достигает указанной позиции (например top: 0) и прилипает к окну, то не получается правильно получить его изначальные статичные координаты (относительно окна и относительно родителя).
  • Значение getBoundingClientRect().top становится равно нулю.
  • Значение offsetTop увеличивается по мере прокрутки.
Демонстрация проблемы:
https://jsfiddle.net/Lxud76ma/

Всё это логично, ведь элемент фактически плывет внутри своего родителя. И несмотря на то, что место под его статичное положение остаётся зарезервированным (остальные элементы не сдвигаются, как если бы элемент имел position: fixed), но расчеты координат идут по его фактическом местонахождению.

Как в данном случае получить координаты того места, которое зарезервировано для элемента в его статичном положении, но тогда пока он приклеен к экрану? Есть идеи?

Последний раз редактировалось mi.rafaylik, 13.11.2019 в 02:11.
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2019, 22:24
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от mi.rafaylik
координаты элемента
Т. е. не координаты элемента, а координаты того места, где находился бы элемент без position: sticky?
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2019, 22:29
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Сообщение от Malleys Посмотреть сообщение
Т. е. не координаты элемента, а координаты того места, где находился бы элемент без position: sticky?
Верно, спасибо за правильную формулировку, поправил вопрос.

Последний раз редактировалось mi.rafaylik, 26.10.2019 в 22:31.
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2019, 22:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вы можете указать элементу перед измерениями position: static;, измерить и вернуть после исходное значение position
https://jsfiddle.net/Lk74do8u/
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2019, 22:36
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Сообщение от Malleys Посмотреть сообщение
Вы можете указать элементу перед измерениями position: static;, измерить и вернуть после исходное значение position
https://jsfiddle.net/Lk74do8u/
Кстати были такие мысли, но думал что элемент будет дергаться визуально, но вроде как всё в порядке. Вообще функция нужна для пересчета при ресайзе окна.
Спасибо большое!

Последний раз редактировалось mi.rafaylik, 26.10.2019 в 23:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сделать анимацию на css? darktowerk56c (X)HTML/CSS 2 03.10.2019 11:07
Google map API: поиск места и получение координат. test2542 Общие вопросы Javascript 1 26.02.2019 11:17
получение значений из массива и вставка нового элемента malefikus13 Общие вопросы Javascript 7 06.10.2015 11:56
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01