В учебных целях я работаю с самым основным из CSS.У меня есть панель навигации, установленная на position: sticky, которая прекрасно работает, пока она не взаимодействует с набором плавающих столбцов дальше по странице.
gif прокрутки сайта и прерывания навигации
Я не уверен, что это из-за поплавка или из-за неправильного расчета простоты моего макета.Прямо сейчас, 2-колоночный макет сделан с помощью:
#main-menu {
width: 100%;
height: auto;
text-align: right;
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
}
.column {
width: 50%;
float: left;
}
Использование встроенного отображения блоков работает и не влияет на липкое меню, но, как и ожидалось, я не могу установить для них ширину 50%.Исправление было бы здорово, но также объяснение, почему я испытываю это.
Спасибо!
#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">
<a href="#">Title</a>
</div>
<div class="menu-item">
<a href="#">L1</a>
</div>
<div class="menu-item">
<a href="#">L2</a>
</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>