Почему js код не работает?

Question

[Laziz Ortikov]

Не работаете фиксированная шапка, не пойму почему.

.header {
	&__inner {
		display: flex;
		justify-content: space-between;
		height: 100px;
	}

}

.header__fixed {
	position: fixed;
	height: 100px;
	top: 0;
	left: 0;
	right: 0;
	background-color: red;
}

const headerFixed = document.querySelector('.header');

window.addEventListener('scroll', () => {
	if (window.pageYoffset > 100) {
		headerFixed.classList.add('header__fixed')
	} else {
		headerFixed.classList.remove('header__fixed')
	} 
})

Comments

[Alex_mos]

А html код

[Laziz Ortikov]

Alex_mos,

<header class="header">
	<div class="container">
		<div class="header__inner">
			<a href="#" class="header__logo">
				<img src="../../img/logo.svg" alt="logo">
			</a>
			<button class="header__hamburger">
				<span class="header__menu"></span>
				<span class="header__menu"></span>
				<span class="header__menu"></span>
			</button>
			<ul class="header__language">
				<li class="header__language-item">
					UA
				</li>
				<li class="header__language-item">
					RU
				</li>
			</ul>
			<div class="header__well">
				<span class="header__well-item">USD 28,90</span>
				<span class="header__well-item">EUR 35,00</span>
			</div>
			<ul class="header__social social">
				<li class="header__social-item">
					<a href="" class="header__social-link">
						<img src="../../img/facebook.svg" alt="facebook">
					</a>
				</li>
				<li class="header__social-item">
					<a href="" class="header__social-link">
						<img src="../../img/instagram.svg" alt="instagram">
					</a>
				</li>
				<li class="header__social-item">
					<a href="" class="header__social-link">
						<img src="../../img/youtube.svg" alt="youtube">
					</a>
				</li>
			</ul>
			<div class="header__phone">
				<span class="header__phone-item">044-537-20-07</span>
				<span class="header__phone-item">068-537-20-07</span>
			</div>
		</div>
	</div>

</header>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

[Alex_mos]

Laziz Ortikov, не работает только этот код? Или есть ещё какой то js который работает?

[Laziz Ortikov]

Alex_mos, Не работает только js код (есть конечно ещё)

[xdevelx]

А в консоли разве нет type error?

[Дмитрий Беляев]

Laziz Ortikov, маленький совет, пусть и оффтоп:
Поберегите ресурсы пользователя...

Эту задачу можно решить чистым css, через position: sticky
https://developer.mozilla.org/ru/docs/Web/CSS/posi...
https://developer.mozilla.org/ru/docs/Web/CSS/posi...

Если уж решать через js, то лучше использовать IntersectionObserver

Ну и в крайнем случае, задайте пассивный режим для события скролла
https://developer.mozilla.org/ru/docs/Web/API/Even...
https://developer.mozilla.org/ru/docs/Web/API/Even...

Answer 1

[YavaDev]

pageYOffset - буковка "O" должна быть большой

Comments

[Laziz Ortikov]

маленькая же

[YavaDev]

Laziz Ortikov, большую надо

[imko]

Laziz Ortikov, в блокноте что ли код пишешь?)

[Laziz Ortikov]

imko, vs

[imko]

Laziz Ortikov, vs которая code надеюсь?) и которая говорит ?