<div class="site">
	
	<nav class="nav">
		<div class="nav__title">Site Title</div>
		<ul class="nav__list">
			<li class="nav__item">Services</li>
			<li class="nav__item">About Us</li>
			<li class="nav__item">Blog</li>
		</ul>
	</nav>
	
	<div class="hero">
		<h1>Position Sticky Subnav</h1>
	</div>
	
	<section class="section">
		<h2>A Section</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
	</section>
	
	<div class="subnav">
		<div class="subnav__container">
			<div class="subnav__title">
				<h1>Sub Nav</h1>
			</div>
			<ul class="subnav__list">
				<li class="subnav__item">Section 1</li>
				<li class="subnav__item">Section 2</li>
				<li class="subnav__item">Section 3</li>
			</ul>
		</div>
	</div>

	<section class="section">
		<h2>A Section</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
	</section>
	<section class="section">
		<h2>A Section</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
	</section>
	<section class="section">
		<h2>A Section</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
	</section>
	<section class="section">
		<h2>A Section</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, minus laudantium excepturi incidunt voluptate impedit quisquam. Dicta sed, ea perferendis consequuntur expedita nesciunt nam quae omnis voluptatibus corporis. Voluptate, cumque?</p>
	</section>
	<footer>
		<p>No Copyright 1996</p>
	</footer>
</div>
// IMPORTANT
.nav {
	position: sticky;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	top: 0;
}

.subnav {
	position: sticky;
	bottom: 0;
	top: 60px; // prevent covering main nav
}

// DEMO LAYOUT CODE
.nav {
	background: #42A5F5;
	&__title {
		margin: 0px 30px;
	}
	&__item {
		display: inline-block;
		margin: 0px 30px;
	}
}

.hero {
	display: grid;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #BBDEFB;
	
	h1 {
		font-size: 6em;
		margin: 0 90px;
		text-align: center;
	}
}

.subnav {
	background: #fff;
	border-bottom: 1px solid #222;
	&__container {
		align-items: baseline;
		display: flex;
		margin: 0 60px;
		padding: 15px 0;
	}
	&__title {
		font-size: 1.25em;
	}
	&__list {
		margin: 0 15px;
	}
	&__item {
		display: inline-block;
		margin: 0 8px;
		padding: 5px;
	}
}

.section {
	max-width: 900px;
	margin: 60px auto;
	padding: 90px 30px;
	background-color: #FFCDD2;
	text-align: center;
	
	h2 {
		font-size: 3em;
		margin-bottom: 15px;
	}
	p {
		line-height: 1.625em;
		margin: 0 auto;
		max-width: 480px;
	}
}

footer {
	text-align: center;
}
View Compiled
// look up ^^

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.