Sticky navigation breaks when encounters floated content? - html

Question

For instructional purposes, I'm working with the most basic of CSS. I have a navigation bar set to position: sticky which works great UNTIL it interacts with a set of floated columns further down the page.
gif of site scrolling and breaking nav
I'm unsure if it's because of the float, or some poor calculation regarding the simplicity of my layout. Right now, the 2-column layout is made with:
#main-menu {
width: 100%;
height: auto;
text-align: right;
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
}
.column {
width: 50%;
float: left;
}
Using an inline-block display works and does not affect the sticky menu, but as expected I can not set them to 50% width. A fix would be great, but also an explanation on why I'm experiencing this.
Thank you!
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
Title
</div>
<div class="menu-item">
L1
</div>
<div class="menu-item">
L2
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>

Answer 1

The floated elements are no longer in the normal flow of the DOM, reducing the overall height of the body. Using inspector, you can see this (blue representing the height of the body):
Thus, as you encounter the floats, your position: sticky which is relative to the body, will appear to scroll.
A "fix" is to clear your floats. I applied the following clearfix to the body:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Here's the snippet with demo:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
Title
</div>
<div class="menu-item">
L1
</div>
<div class="menu-item">
L2
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>