html 粘滞标题 - 向下滚动隐藏，向上滚动显示

Posted 2021-05-11

body{
	height: 10000px;
	margin: 0;
	padding: 0;
}
#header{
	position: fixed;
	top: 0px;
	background-color: red;
	width: 100%;
	height: 100px;
}

.header__background{
	background-color: blue !important;
}
.header__background_top{
	background-color: transparent;
}
.header__background,
.header__background_top{
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

var header = document.getElementById('header');
	var scrollPrev = 0 // Предыдущее значение скролла
	
	window.onscroll = function() {
		var scrolled = window.pageYOffset || document.documentElement.scrollTop;
		var firstScrollUp = false; // Параметр начала сколла вверх
		var firstScrollDown = false; // Параметр начала сколла вниз
		
		// Стили для начального состояния хедера
		header.classList.remove("header__background");
		header.classList.add("header__background_top");
		
		// Если скроллим
		if ( scrolled > 0 ) {
			
			// Если текущее значение скролла > предыдущего, т.е. скроллим вниз
			if ( scrolled > scrollPrev ) {
				firstScrollUp = false; // Обнуляем параметр начала скролла вверх
				// Если меню видно
				if ( scrolled < header.clientHeight + header.offsetHeight ) {
					// Если только начали скроллить вниз
					if ( firstScrollDown === false ) {
						var topPosition = header.offsetTop; // Фиксируем текущую позицию меню
						// header.style.top = topPosition + "px";
						firstScrollDown = true;
					}
				// Убираем меню - НЕ видно
				} else {
					// Позиционируем меню вне экрана
					// header.style.position = "absolute";
					// header.style.top = topPosition + "px";
					header.style.opacity = "0";
					
				}
				
			// Если текущее значение скролла < предыдущего, т.е. скроллим вверх
			}
			
			else {
				firstScrollDown = false; // Обнуляем параметр начала скролла вниз
				// Если меню не видно
				if ( scrolled > header.offsetTop ) {
					// Если только начали скроллить вверх
					if ( firstScrollUp === false ) {
						var topPosition = header.offsetTop; // Фиксируем текущую позицию меню
						header.style.top = topPosition + "px";
						firstScrollUp = true;
						header.classList.add("header__background");
						header.style.opacity = "1";
					}
					// Позиционируем меню фиксированно
					header.style.position = "fixed";
					
				}
				
			}
			
			// Присваеваем текущее значение скролла предыдущему
			scrollPrev = scrolled;
			
		}	
	};			
	

<div id="header"></div>