How does the position: sticky; property work?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one oftop,right,bottom, orleftfor sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]
So in your example, you have to define the position where it should stick in the end by using the top property.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>How does the position: sticky; property work?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one oftop,right,bottom, orleftfor sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]
So in your example, you have to define the position where it should stick in the end by using the top property.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>position: sticky' not working when 'height' is defined
The issue here is with height, but not the height you thought about. Let's first start by the definition of the sticky position:
A stickily positioned element is an element whose computed position
value is sticky. It's treated as relatively positioned until its
containing block crosses a specified threshold (such as setting top to
value other than auto) within its flow root (or the container it
scrolls within), at which point it is treated as "stuck" until meeting
the opposite edge of its containing block.
The important part here is the last sentence which explain that the position sticky will end when the element reach the edge of its containing block and in your case the containing block of the sticky element is the body and you set the body to be height:100% and you are having an overflow of content.
So when setting the height of main to be 92% and the footer to be 8%, you already made the footer at the oppsite edge of its containing block. Here is an illustration where I added a background color to the body so you can clearly see this:
html,body { height: 100%; margin: 0;}html { background:white;}body { background:blue;}
#main { height: 92%;}#landing { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;}#landingContent { width: 20vw;}#footerNav { height: 8%; display: flex; align-items: center; position: sticky; top: 0px; background:red; color:#fff;}<div id="main"> <div id="landing"> <div id="landingContent"> <h1 class="logo">Logo</h1> <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p> <button>Button</button> </div> </div></div><div id="footerNav"> <div id="footerNavContent"> <h1 class="logo">Logo</h1> </div></div><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>Position sticky on thead
Position sticky on thead th works in 2018!
In your stylesheets just add this one line:
thead th { position: sticky; top: 0; }
Your table will need to include thead and th for this to style.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
// your body code
</tbody>
</table>
Also, if you have multiple rows in thead, you can select the first one to remain sticky:
thead tr:first-child th { position: sticky; top: 0; }
As of March 2018 support is pretty much there across modern browsers
ref: https://caniuse.com/#feat=css-sticky
Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)
How does the position: sticky; property work?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one oftop,right,bottom, orleftfor sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
[source: MDN]
So in your example, you have to define the position where it should stick in the end by using the top property.
html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>Why position sticky is not working in my code?
Its because you have overflow-x-hidden in parent . sticky doesn't work if parent overflow is hidden.
{!categorySearch && (
<div className="max-w-2xl mx-auto z-40 relative font-metropolis_semibold">
<div className="sticky top-0">
<div className=" z-40 bg-white w-full transition-all">
<div
id="logo"
className={
logo
? "px-md mt-10 font-medium"
: "px-md mt-10 font-medium animate"
}
>
<div className="overflow-x-hidden ">
<img
src={settings.logo_intro_image_url}
alt={settings.name}
className="max-w-full object-contain company-logo"
style={{ height: settings.logo_height }}
id="company-logo"
/>
</div>
</div>
<div
className={`${
logo
? "shadow-none border-none"
: "border-b-2 border-gray-200"
}`}
>
<TopOptions
showOption={showOption}
setShowOption={setShowOption}
addBorder={logo}
outlets={outlets}
languageLabels={languageLabels}
settings={selectedOutlet.settings}
/>
</div>
</div>
{Object.keys(bannerArray).length === 1 ? (
<div className="w-full px-md border-b-8 border-banner pb-md">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<>
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
</>
);
})}
</div>
) : (
<div className="max-h-full h-19.7 hide-scroll px-md flex overflow-x-auto gap-5p border-b-8 border-light-bg-gray">
{bannerArray &&
bannerArray.map((banner, index) => {
return (
<PosterSlider
key={index}
image={banner.image}
loadingBanners={loadingBanners}
isSingle={Object.keys(bannerArray).length === 1}
/>
);
})}
</div>
)}
<div className="flex flex-row justify-between items-center px-md my-25p">
<p className="font-metropolis_regular text-sm break-words">
{languageLabels.like_to_order}
</p>
<img
src={Search}
alt="search"
onClick={() => setCategorySearch(true)}
/>
</div>
<div className="grid grid-flow-row w-full grid-cols-2 place-items-center gap-10p px-md pb-20">
{categoryList.map((category) => {
// console.log(category);
return (
<Dishes
key={category.category_id}
category={category}
languageLabels={languageLabels}
loading={loadingCategories}
/>
);
})}
</div>
<BottomNavigation
languageLabels={languageLabels}
isLoyalty={settings.enable_reward_points_functionality}
/>
</div>
</div>
)}
Position sticky not taking effect
The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
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>Aligning position sticky at the bottom right is not working
Try this:
.chat {
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
left: 20px;
background: red;
border: 0;
}
position: fixed is key element.
Related Topics
Change Select List Option Background Colour on Hover
Best Practices & Considerations When Writing HTML Emails
How to Force a Web Browser Not to Cache Images
Change Div Order With CSS Depending on Device-Width
Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements
Html/Css Triangle With Pseudo Elements
Absolute Urls Omitting the Protocol (Scheme) in Order to Preserve the One of the Current Page
Html5 - Canvas Element - Multiple Layers
How to Use CSS to Surround a Number With a Circle
:Last-Child Not Working as Expected
Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned
How to Add a New Line in Textarea Element
Does Opacity:0 Have Exactly the Same Effect as Visibility:Hidden
Component to Inject and Interpret String With HTML Code into Jsf Page
Why Are Nested Anchor Tags Illegal
Html Input="File" Accept Attribute File Type (Csv)