My position: sticky element isn't sticky when using flexbox
Since flex box elements default to stretch
, all the elements are the same height, which can't be scrolled against.
Adding align-self: flex-start
to the sticky element set the height to auto, which allowed scrolling, and fixed it.
Currently this is supported in all major browsers, but Safari is still behind a -webkit-
prefix, and other browsers except for Firefox have some issues with position: sticky
tables.
.flexbox-wrapper { display: flex; overflow: auto; height: 200px; /* Not necessary -- for example only */}.regular { background-color: blue; /* Not necessary -- for example only */ height: 600px; /* Not necessary -- for example only */}.sticky { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; align-self: flex-start; /* <-- this is the fix */ background-color: red; /* Not necessary -- for example only */}
<div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div></div>
position: sticky not working within flexbox child
You need to specify a position where it should be fixed.
Do this by assigning something like top: "your wanted distance"px;
e.g.:
.colonnade__trigger .label {
position: sticky;
top: 10px;
display: block;
transform: rotate(90deg);
transform-origin: 0 100%
}
Look at MDN - Sticky Position
My sticky positioned element isn't acting like it should
You're div with the id of main
has overflow-x: hidden
. That div is the parent of the child that you want sticky and overflow hidden doesn't play well with position: sticky. Remove the overflow-x: hidden
css and it works (line #118 in your style.css):
#main{
min-height:100%;
width: 100%;
/* overflow-x: hidden; */ //remove this
}
There's nothing overflowing, anyhow.
CSS position sticky doesn't work properly when element is inside another
if your aside
will always have a fixed height use negative top value and make the parent container sticky:
nav {
height: 50px;
background: lightgreen;
}
header {
position: sticky;
top: -30px;
}
main {
height: 200vh;
background: linear-gradient(180deg, black 0%, white 100%);
}
aside {
height: 30px;
background: red;
}
<header>
<aside></aside>
<nav></nav>
</header>
<main></main>
Related Topics
How to Reference One CSS Rule Within Another
Cross Site Scripting in CSS Stylesheets
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
How to Clear the Cache of Nginx
How to Scale CSS Sprites When Used as Background-Image
Css @Font-Face Absolute Url from External Domain: Fonts Not Loading in Firefox
How to Target Elements with an Attribute That Has Any Value in CSS
How Can One Import Only Variables and Mixins from SASS Stylesheets
Complete Styles for Cross Browser CSS Zoom
Style ≪Select≫ Element Based on Selected ≪Option≫
Css Background-Size: Cover + Background-Attachment: Fixed Clipping Background Images
Offset a Background Image from the Right Using Css
Placing Unicode Character in CSS Content Value
How to Apply Multiple Background Colors With Css3