Свойство scroll не работает в данном примере, как решить?

Question

[Aison]

При прокрутке вниз класс добавляется и сразу же удаляется что видно на этом видео (radikal)

код jq

const $header = $(".header")
let prevScroll
let lastShowPos

$('.main').scroll(function() {
	const scrolled = $('.main').scrollTop()

	if (scrolled > 0 && scrolled > prevScroll) {
		$header.addClass("header_hide")
		lastShowPos = scrolled
	} else if (scrolled <= Math.max(lastShowPos - 255, 0)) {
		$header.removeClass("header_hide")
	}
	prevScroll = scrolled
});

этот класс добавляется.

.header_hide {
	display:none;
}

что примечательно. у шапки 42px и border в 2 пикселя снизу. если сделать так

.header_hide {
	max-height:0;
}

то получится, что высота border останется и вроде как норм работает, но нужно заставить работать скрипт правильно, я даже не представляю как решить сие проблему...

Answer 1

[Алексей Дубровин]

1) Не используйте спец символы в названиях. Вот мне нужно будет найти потом эту переменную, я как с бубном должен танцевать что-бы это отыскать?
2) Используйте точку с запятой. Я хочу быть уверен что код 100% работает как надо.

display:none;

свойство убирает элемент с потока документа.
когда вы убираете этот элемент ,у вас убирается скролл(все элементы вмещаются в 1 экран), scroll = 0;

Всё это можно было узнать сделав console.log(scrolled);

Ткже можно написать что вы вообще хотите сделать.
Тк как весь код ,что вы написали, потенциально может заставить дёргаться контент. Будь у вас контента больше чем на 1 экран.

Comments

[Aison]

1: тут не понял. Речь про это d > 0 && scrolled?
2: код сам отрабатывает свою функцию, он ставит класс к div header. он прекрасно работает на другом примере, где контента больше, там да. но в моём примере маленькая область прокрутки + в другом примере я вешаю скролл на window, а не на класс main но я понял Вас, учту на будущее.

Плеер должен быть растянут на весь экран. у плеера используется свойствоheight: 100vh

мне и нужно header убрать из потока, чтобы она не мешала растянутся плееру на весь экран. просто сделать его прозрачным и т.п не выйдет, нужно именно убрать через dispaly:none; но он не убирает header, как можно видеть на видео, а ставит класс и тут же его убирает и визуально как на видео наблюдаются такие передёргивания. есть идеи?

[Алексей Дубровин]

Aison,
1) const $header = $(".header")// Если я буду искать я начну вбивать he - автокомплит не покажем мне такую переменную как $header. тк как он начинается с $. А то что доллар нужно ставить я бы никогда не додумался.

По поводу решения задачи.
Я бы подумал над тем, а что если у меня блок идёт не прям за header. Мне тогда нужно будет писать новый код. И не выбрал бы этот путь).

Как я понял это плеер. Задача показать видос на весь экран и не иметь другой лишней информации.
1) Помещаю мой плеер в обёрточный блок.
Логика при взаимодействии(событии):
Получаю высоту блока с видео и указываю её родительскому блоку.
Далее блоку с видео устанавливаю класс с:
position: fixed;
width:100vw;
heighth:100vh;

Всё) Не трудным образом можно понять что это это можно всё обернуть в функцию и вызывать на любое событие.

[Aison]

>>>По поводу решения задачи...

мой вариант вёрстки предполагает именно такое решение.

могу всё на кнопке реализовать (через клик убирать его, что куда проще, но там же легко? а мне нужно попарить мозг и по итогу выбрать кнопку. кеке). идея скрола больше нравится.

>>>не иметь другой лишней информации.

именно!

можно пожалуйста пример кода, хоть деревянный. мне как бы посмотреть, а там уже всё равно

[Алексей Дубровин]

Aison,
тк никто не мешает функцию вешать на скролл). Логика которая я описал выше будет работать даже в вашем скрипте.( Без схлопывания header )