Вход

Просмотр полной версии : offsetTop можно ли использовать

Сергей Ракипов
07.05.2020, 10:09
Прочитал что этот метод устарел, и я не понял он что стал не рабочим или как с var его заменили на let но его до сих пор без проблем можно писать.

Если устарел то чем его заменить.
Сергей Ракипов
07.05.2020, 10:12
И там написано что он просчитывает от родителя, родитель определяется версткой?
рони
07.05.2020, 10:30
родитель определяется версткой?
ближайший предок, который удовлетворяет следующим условиям:

Является CSS-позиционированным (CSS-свойство position равно absolute, relative, fixed или sticky),
или <td>, <th>, <table>,
или <body>
https://learn.javascript.ru/size-and-scroll#offsetparent-offsetleft-top
Сергей Ракипов
07.05.2020, 11:04
https://learn.javascript.ru/size-and-scroll#offsetparent-offsetleft-top

прочитал понял, но не понял что значит устарел
Nexus
07.05.2020, 13:31
Прочитал что этот метод устарел
Где прочитали?
Сергей Ракипов
07.05.2020, 14:22
Где прочитали?

https://learn.javascript.ru/coordinates-document#ustarevshiy-metod-offset
Nexus
07.05.2020, 15:20
Сергей Ракипов, там говорится не о том, что метод offsetTop устарел. Там говорится о том, что более нет никакой нужны получать координаты блока на странице с помощью суммирования offsetTop всех родительских элементов блока, т.к. появился метод getBoundingClientRect, который делает это проще и точнее названного выше варианта.

Надеюсь понятно объяснил.
Сергей Ракипов
07.05.2020, 16:27
Сергей Ракипов, там говорится не о том, что метод offsetTop устарел. Там говорится о том, что более нет никакой нужны получать координаты блока на странице с помощью суммирования offsetTop всех родительских элементов блока, т.к. появился метод getBoundingClientRect, который делает это проще и точнее названного выше варианта.

Надеюсь понятно объяснил.

Буду разбиратся с этим getBoundingClientRect
Сергей Ракипов
09.05.2020, 15:08
Почему не сработало
const imgArticle = document.querySelector(".img_article");

function onScroll() {
let posTop = imgArticle.getBoundingClientRect().top;

if(posTop = 0) {
imgArticle.style.display = "fixed";
}
}

document.addEventListener("scroll", onScroll);

console.log(imgArticle.getBoundingClientRect().top );

У меня есть блок который достигает вверх страницы и должен зафиксироваться
рони
09.05.2020, 15:15
Сергей Ракипов,
6 строка
Сергей Ракипов
09.05.2020, 15:19
Сергей Ракипов,
6 строка

так говорится что когда переменная posTop приобретет значение 0 то нужно сделать...
Сергей Ракипов
09.05.2020, 15:30
а точно не присвоить а равенство ==
Сергей Ракипов
09.05.2020, 15:32
let imgArticle = document.querySelector(".img_article");

function onScroll() {
let posTop = imgArticle.getBoundingClientRect().top;

if(posTop >= 0) {
imgArticle.style.display = "fixed";
}
}

document.addEventListener("scroll", onScroll);

console.log(imgArticle.getBoundingClientRect().top );

все равно не сработало
Сергей Ракипов
09.05.2020, 15:34
Все я все понял, увидел грубую ошибку в css простите что занимаю ваше время своей не внимательностью
Сергей Ракипов
10.05.2020, 08:45
let imgArticle = document.querySelector(".img_article");

function onScroll() {
let scrollTop = document.querySelector("body").getBoundingClientRect().top;


if(scrollTop >= 0 & scrollTop <= -220){
imgArticle.style.position = "absolute";
imgArticle.style.top = "0";
}
else if(scrollTop >= -220 & scrollTop <= -500){
imgArticle.style.position = "fixed";
imgArticle.style.top = "0";
}
else{
imgArticle.style.position = "absolute";
imgArticle.style.top = "280" + "px";
}

console.log(scrollTop);
}

document.addEventListener("scroll", onScroll);


Скажите я условия что ли не правильно пишу, у меня сразу else переходит

Отрицательные значение как то по другому пишутся
рони
10.05.2020, 09:41
я условия что ли не правильно пишу
:yes:
Сергей Ракипов
10.05.2020, 10:38
:yes:

Точно забыл что больше, а что меньше в математике со значением минус.
рони
10.05.2020, 11:10
Сергей Ракипов,
if(scrollTop >= 0 & scrollTop <= -220){
Сергей Ракипов
10.05.2020, 12:16
рони,
Спасибо я разобрался