Как сделать подобный код на нативном JS?

Question

[Nikita Shchypylov]

Всем привет

Есть такой код на jQuery, но я не могу переписать его на нативный JS. Подскажите, как нужно сделать:

var aboutUs = $('#about_us').offset().top;
var quality = $('#quality').offset().top;
		if (scrolledFromTop > aboutUs && scrolledFromTop < quality) {
			$('.header__list li a').removeClass('active');
			$('.about-us').addClass('active')
		}

Спасибо

Answer 1

[Bowen]

function getElementById(name) {
    return document.getElementById(name);
}
var aboutUsElement = getElementById('about_us'),
    aboutUsOffsetTop = aboutUsElement ? aboutUsElement.offsetTop : 0,
    aboutUsClasses = document.getElementsByClassName('about_us')[0].classList;

var qualityElement = getElementById('quality'),
    qualityOffsetTop = qualityElement ? qualityElement.offsetTop : 0;
    
var headerLinkClasses = document.querySelectorAll('.header__list li a')[0].classList;

if (scrolledFromTop > aboutUsOffsetTop && scrolledFromTop < qualityOffsetTop) {
    headerLinkClasses.remove("active");
    aboutUsClasses.remove("about_us");
}

P.S. Если вам нужно получить координаты выбранного элемент(а|ов) относительно родителя, то оставьте как есть. Если же нет, замените:

aboutUsElement.offsetTop
qualityElement.offsetTop

На

getOffsetTop(aboutUsElement)
getOffsetTop(qualityElement)

После первой функции добавьте еще одну:

function getOffsetTop(el) {
    var p = el.getBoundingClientRect();
    return p.top;
}

Comments

[Денис]

Bowen Глядя на вашу функцию getElementById, индусский кодер обзавидовался бы )))

[Константин Громов]

offset().top нельзя заменить с помощью offsetTop. Это несколько разные вещи.

Answer 2

[SoloMidPlzD]

сдесь есть примеры youmightnotneedjquery.com