粘性标题脚本不考虑窗口的可变高度

Question

我有一个粘性标题，它利用了这里找到的过程(https://www.w3schools.com/howto/howto_js_sticky_header.asp(。这很好用。但是，这并不能解释标题上方 hero 元素的可变高度。垂直调整窗口大小时，粘滞标题会中断，直到您刷新浏览器。我需要向脚本添加什么，以便在调整大小时检测到新的高度？

这是一个代码笔，显示了我的困境：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来完成这个。您所需要的只是两行 css 能够完成相同的任务，并且复杂性更低。

看看这个：

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 偏移量时才会变得粘滞。