Скрипт липкого заголовка не учитывает переменную высоту окна

Question

У меня есть липкий заголовок, который использует процесс, найденный здесь (https://www.w3schools.com/howto/howto_js_sticky_header.asp). Это прекрасно работает. Однако это не учитывает переменную высоту элемента героя над заголовком. Когда вы изменяете размер окна по вертикали, липкий заголовок прерывается, пока вы не обновите sh браузер. Что мне нужно добавить к сценарию, чтобы он определял новую высоту при изменении размера?

Вот кодовый блок, отображающий мою дилемму: https://codepen.io/JKDESIGN44/pen/VwYBqBV

Вот javascript:

// STICKY HEADER

document.addEventListener('DOMContentLoaded', function () {
  // When the event DOMContentLoaded occurs, it is safe to access the DOM

  // When the user scrolls the page, execute myFunction 
  window.addEventListener('scroll', myFunctionForSticky);

  // Get the navbar
  var navbar = document.getElementById("c3Header");

  // Get the offset position of the navbar
  var sticky = navbar.offsetTop;

  // Add the sticky class to the navbar when you reach its scroll position. 
  // Remove "sticky" when you leave the scroll position

  function myFunctionForSticky() {
    if (window.pageYOffset >= sticky) {
      console.log("window.pageYOffset >= sticky");
    } else {
      console.log("Not window.pageYOffset >= sticky");
    }
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
})

Answer 1

Вам не нужно JS, чтобы выполнить sh это. Все, что вам нужно, это две строки css, чтобы иметь возможность выполнить sh одинаково, с меньшей сложностью.

Взгляните на это:

html, body, header{
  margin: 0px;
  padding: 0px;
}

.full-height-section{
	height: 100vh;
	width: 100%;
	position: relative;
}

a{
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	color: inherit;
}

li{
	list-style-type: none;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 2px;
	transition: all 0.1s ease;
}

.bg-aqua{
	background-color: #073038;
}

.text-white{
	color: #FFFFFF;
  transition: all 0.1s ease;
  font-family: 
}

.text-hover-blue:hover{
	color: #7DD2EF;
	transition: all 0.1s ease;
}


/* --------------HEADER---- */

/* ----HERO---- */

.hero{
	height: 100vh;
	width: 100vw;
	min-height: 500px;
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.hero-text{
	font-size: 40px;
	text-transform: uppercase;
	z-index: 20;
}

.content-hero{
	height: 25vh;
	width: 100vw;
	min-height: 500px;
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.hero-bg{
	display: block;
	object-fit: cover;
	z-index: -1;
	position: absolute;
	min-height: 500px;
}

.hero-logo-wrap{
	align-self: center;
	height: 30vw;
	max-height: 50vh;
	min-height: 200px;
	z-index: 10;
}

.hero-logo{
	height: 100%;
}

.down-arrow-wrapper{
	height: 50px;
	width: 50px;
	position: absolute;
	margin: auto; 
	left: 0;
	right: 0;
	bottom: 40px;
	border-radius: 999px;
	background-color: rgba(125,210,239,0.0);
	transition: all 0.5s ease;
	z-index: 10;
}

.down-arrow-wrapper:hover{
	background-color: rgba(125,210,239,1.0);
	transition: all 0.5s ease;
	transform: scale(1.2)
}


.down-arrow-rel-wrapper{
	height: 50px;
	width: 50px;
	position: relative;
}

.down-arrow{
	height: 20px;
	width: 20px;
	position: absolute;
	margin: auto; 
	left: 0;
	right: 0;
	top: 8px;
	transform: rotate(45deg);
	border-right: solid #fff 3px;
	border-bottom: solid #fff 3px;
}

.img-overlay{
	height: 100%;
	width: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	mix-blend-mode: overlay;
	
	background: rgb(3,31,36);
	background: -moz-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
	background: -webkit-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
	background: linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24",endColorstr="#7dd2ef",GradientType=1);
}

/* ----HERO END---- */


.header{
	height: 150px;
	width: 100%;
	z-index: 100;
	display: flex;
	justify-content: center;
   position: sticky;
   top: 0;
}

.content-header{
	width: 100%;
	z-index: 100;
	display: flex;
	flex-direction: column;
}

.sticky{
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .page-wrapper{
	padding-top: 150px;
}

.nav-flexbox{
	height: 150px;
	width: 80%;
	max-width: 1500px;
	min-width: 1000px;
	position: relative;
/*
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.nav-left{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 2px;
	width: 100%;
}

.nav-center{
	width: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-logo{
	height: 80px;
	z-index: 999;
}

.header-logo-link{
	transition: all 0.5s ease;
}

.header-logo-link:hover{
	transform: scale(1.2);
	transition: all 0.5s ease;
}

.nav-right{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 2px;
	width: 100%;
}

.tab-nav-center{
	display: none;
}

.tab-nav-right{
	display: none;
}


.content-sub-nav{
	height: 50px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
}

.sub-nav-arrow {
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  
  border-bottom: 30px solid #031F24;
  
  position: absolute;
  margin: auto;
  bottom: 0;
  left: 10px;
}


/* ---------------HEADER END---- */

.content-section{
  height: calc(100vh - 150px);
  display: flex;
  justify-content: center;
  align-items: center;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
</head>

<header>
		
<!----------------
	HERO
------------------>
		
		<div class="hero full-height-section">
			
			<div class="hero-logo-wrap">	
				<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Logo_Vertical.png" class="hero-logo">
			</div>
			
			<a href="#c3Header">
			
				<div class="down-arrow-wrapper">
					
					<div class="down-arrow">
						
					</div>
					
				</div>
			
			</a>
			
			<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/audience-black-and-white-black-and-white-2014773.jpg" class="hero-bg full-height-section">
<!--------------Overlay -->
			<div class="bg-aqua" style="width: 100%; height: 100%; position: absolute;
				margin: auto; top: 0; opacity: 0.7; z-index: 9;">
			</div>
			<div class="img-overlay" style="z-index: 9;">
			</div>
<!--------------Overlay END -->
			
		</div>
		
<!----------------
	HERO END
------------------>
		
	</header>
	
<!----------------
	NAVIGATION
------------------>
		
	<nav class="header bg-aqua text-white" id="c3Header">
		
		<div class="nav-flexbox">
		
			<div class="nav-left">
				<a href="" class="text-hover-blue"><li>who we are</li></a>
				<a href="" class="text-hover-blue"><li>ministries</li></a>
				<a href="" class="text-hover-blue"><li>sermons</li></a>
			</div>
			
			
				<div class="nav-center">
					<a href="#" class="header-logo-link">
						<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Icon-01.png" class="header-logo">
					</a>
				</div>
	
			
			<div class="nav-right">
				<a href="" class="text-hover-blue"><li>get connected</li></a>
				<a href="" class="text-hover-blue"><li>events</li></a>
				<a href="" class="text-hover-blue"><li>give online</li></a>
			</div>
		
		</div>
		
	</nav>
		
<!----------------
	NAVIGATION END
------------------>

<div class="content-section" style="background-color: #888888;">
  <p>SECTION 1</p>
</div>

<div class="content-section" style="background-color: #999999;">
  <p>SECTION 2</p>
</div>

<div class="content-section" style="background-color: #888888;">
  <p>SECTION 3</p>
</div>

Трюк добавлял:

position: sticky;
top: 0;

К классу .header. В top:0 указано, что содержимое этого класса станет липким только тогда, когда достигнет 0 смещения от вершины (то есть, просто вверху страницы).