How do I create a sticky nav - html

Question

I'm trying to create a sticky nav with css but I must be missing something.
I've found the process on here. But I've tried adding it to the .nav class, the .item class, both, and doesn't do a thing.
I tried adding extra padding below the body, thinking it's an issue of not scrolling down far enough, but still no go.
* {
font-family: arial, sans-serif;
box-sizing: border-box;}
html, body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
margin-top: 65px;
left:0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
<nav>
<a class="logo" href="index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home"/>
</a>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item" style="color:#4D4D4D;">Printing
</li>
<li class="item">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I'm expecting it to scroll relative, then become fixed when it passes the main image. Now it's just scrolling relative

Answer 1

You need to set the sticky positioning on nav, not .nav:
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
Here's a working demo.
* {
font-family: arial, sans-serif;
box-sizing: border-box;
margin: 0;
}
h1 {
background-color: gray;
font-size: 100px;
padding: 40px 20px;
}
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.nav {
margin-top: 65px;
left: 0;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
<h1>Huge title</h1>
<nav>
<a class="logo" href="index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
</a>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home" />
</a>
</li>
<li class="item" style="color:#4D4D4D;">Printing
</li>
<li class="item">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
</nav>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsa voluptas accusamus consectetur, ex, itaque animi expedita cum mollitia dicta. Ullam totam, enim aliquid quo eveniet assumenda possimus ratione maxime!</span>
<span>Omnis cum tempore facere, nobis ullam iure dolorem error, alias aut iste nisi sed autem consequatur. Optio quisquam neque eligendi ab distinctio hic, ea culpa quia atque, deserunt, repudiandae aperiam!</span>
<span>Nihil quia, odit dolores voluptas ea, distinctio eveniet, quasi quidem quae deserunt deleniti ipsa qui saepe libero neque! Ipsam suscipit ipsa consequatur nulla laudantium aspernatur repellat laboriosam, quibusdam. Fuga, aliquam.</span>
<span>Sed assumenda asperiores doloremque eos quam vel tempore cumque facere libero, sequi. Reprehenderit voluptatem tempore itaque velit quibusdam ex, culpa repudiandae amet pariatur dolorem veniam autem voluptatum, perferendis, quasi doloremque.</span>
<span>Animi quae optio amet fuga id architecto ipsum possimus nostrum similique, voluptatibus excepturi totam eius sapiente illo, error laboriosam sed eum nihil eos, perferendis ex natus sequi. Veritatis soluta, neque.</span>
<span>Assumenda repudiandae, est rem, qui repellat odio asperiores doloremque amet autem temporibus, laudantium quibusdam ratione. Voluptates nihil, neque dolorem dolor rem cupiditate deserunt sint dolores distinctio. Officia totam officiis soluta.</span>
<span>Adipisci explicabo, aspernatur assumenda quibusdam ullam aliquid beatae quidem totam repellat voluptate odit numquam molestiae eligendi nisi soluta quaerat consectetur placeat fuga blanditiis, quos non quam recusandae pariatur. Omnis, sunt.</span>
<span>Minima, aspernatur, modi! Temporibus esse minus labore repellendus fugit obcaecati qui laudantium officia impedit. Consequatur vel aliquam earum alias, nam ex consectetur? Ipsum, ea. Officiis quia odio consequatur quo iusto.</span>
<span>Excepturi saepe a, minus earum omnis nisi recusandae ut, repellendus doloremque labore vel, ea id quisquam doloribus rerum beatae deserunt placeat esse. Architecto a sit sed, magnam vero recusandae ullam.</span>
<span>Eaque nihil magnam voluptates fuga iure ipsum excepturi hic fugit quisquam consectetur dicta dolorem velit architecto, rem id porro, tempora inventore ipsam accusamus illum eius suscipit eligendi earum corporis. Ullam.</span>
<span>Molestias, voluptate, velit. Recusandae quas harum asperiores ipsum maiores reprehenderit praesentium ipsam explicabo eius impedit totam beatae atque rerum modi laboriosam id, nemo nisi! Corrupti provident esse deserunt voluptatibus atque.</span>
<span>Distinctio, odit deserunt nam numquam similique provident commodi modi hic nobis, atque ipsum fuga, quidem repellat ea mollitia fugit quasi nulla, voluptatibus consequuntur. Odit incidunt nesciunt vero placeat, assumenda delectus?</span>
<span>Amet hic a optio, error molestiae, iure neque, temporibus pariatur voluptatibus incidunt aspernatur in nobis nesciunt alias fugiat ratione harum porro consequuntur deserunt consequatur sint? Dicta aperiam velit unde iusto?</span>
<span>Ipsum doloribus, deserunt modi tempore. Nobis sequi saepe aliquam vitae neque accusantium necessitatibus dolores natus nostrum, id. Natus reprehenderit temporibus quod doloribus rem hic at fugiat totam sint, expedita incidunt.</span>
<span>Ipsa omnis voluptas dicta perferendis officia temporibus dignissimos quisquam non pariatur, blanditiis eum, accusamus consectetur. Earum voluptatibus iure iste ipsum, porro commodi maiores eos eaque. Repudiandae eius repellat iste, cupiditate.</span>
<span>Delectus fugiat adipisci commodi vel ea accusamus, praesentium veritatis explicabo in exercitationem. Reprehenderit cupiditate ullam temporibus veniam adipisci non dicta quas nisi atque assumenda, ipsam facere error vel debitis odio.</span>
<span>Aliquid amet quo quam. Id saepe ab accusamus non fugit soluta totam explicabo beatae. Enim sapiente veniam blanditiis a vel modi, maiores, placeat obcaecati, quia molestiae deleniti. Optio, quos, porro.</span>
<span>Sapiente voluptatum deleniti, natus reiciendis animi consectetur molestiae eos assumenda explicabo error totam iure obcaecati voluptas qui tempora ipsum mollitia hic magni praesentium quas sint nam facilis enim voluptates nobis!</span>
<span>Aut illo quos ab obcaecati sit maiores optio beatae omnis numquam cumque alias laudantium, temporibus, molestias nesciunt quae vitae soluta nemo quisquam est earum quasi provident qui recusandae. Quod, libero?</span>
<span>Explicabo molestiae adipisci pariatur distinctio, minus rerum, sunt officia aspernatur consectetur eos dolores voluptas itaque saepe dolor ad, nemo perferendis nesciunt repellendus, perspiciatis deserunt quis. Sint deserunt iusto corrupti sapiente!</span></p>
jsFiddle

Answer 2

I think you can use something like the approach below:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
nav {
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav a.active {
background-color: #4CAF50;
color: white;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
html, body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
margin-top: 65px;
left:0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
margin: 0;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<nav id="navbar">
<a class="logo" href="index.html">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home"/>
</a>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item" style="color:#4D4D4D;">Printing
</li>
<li class="item">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Red Packet</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>
</nav>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->