3. Crazy geek
The original:
https://medium.com/@elad/css-…
This article first send WeChat messages public number: jingchengyideng welcome attention, every day to push you fresh front-end technology articles
Browsers have great support for CSS engagement targeting, but many developers don’t use it.
There are two reasons for this:
First, it takes a long time to get good browser support: Browser support often takes a long time to complete, by which time its functionality has been forgotten.
The second reason is that many developers don’t fully understand the logic behind how it works, and that’s where I come in.
I’m assuming you all know what CSS positioning is, but it’s good to briefly review it first:
Three years ago, there were four types of CSS positioning: static, relative, absolute, and fixed.
The main difference between static, relative, absolute, and fixed is the amount of space they take up in the DOM stream. Static and Relative retain their natural space in the document stream, while Absolute and Fixed do not — their space is removed and has a floating behavior.
As I will explain below, the new stickiness location has similarities to all types.
My first sticky location
Many of you have probably played sticky positioning. I had been exposed to it for a while, until I realized I didn’t fully understand it.
In the first example, it was easy to see that when the viewport reached the defined position, the element would get stuck.
Ex. :
.some-component{
position: sticky;
top: 0;
} But the problem is, sometimes it works and sometimes it doesn’t. When it works, the element will stick, but on scrolling to other parts, it will stop sticking. As someone who lives off of CSS, I couldn’t accept that I didn’t understand this issue at all, so I decided to get the stickiness position right.
Exploring viscous localization
In fiddling with it, I quickly noticed that when an element with a position:sticky style is wrapped and it is the only element in the wrapped element, the element defined as position:sticky will not stick.
<! -- DOESN'T WORK!!! --> <style> .sticky{ position: sticky; top: 0; } </style> <div class="wrapper"> <div class="sticky"> SOME CONTENT </div> </div>When I add more elements to the wrapper element, it starts to work properly.
Why is that?
This is because when an element is given the position: sticky style, the container of the sticky item is the only area it can paste. A sticky element does not have any elements to float because it can only float on its sibling elements. As the only child element, it cannot float.
How do you make CSS sticky localization work
CSS Sticky Locator has two main parts, Sticky Items and Sticky Containers.
Sticky element – is the position: sticky style we defined with the position. When the viewport position matches the position definition, the element will float, for example: top: 0px.
Ex. :
.some-component{
position: sticky;
top: 0px;
}Sticky containers – HTML elements that wrap sticky elements. This is the maximum area where a sticky element can float.
When you define an element with a position:sticky style, the parent element is automatically defined as a sticky container! This is very important to remember! Containers are scopes of sticky elements that cannot leave the sticky container they are in.
This is why in the previous example, the sticky element is not stuck: the sticky element is the only child element in the sticky container.
Sticky CSS positioning schematic:
Sticky elements and sticky containers
View the example on CodePen:
https://codepen.io/elad2412/p…
Understand the sticky behavior of CSS
As I said earlier, CSS stickiness locators behave differently from all other CSS locators, but from another point of view, they have some similarities. Let me explain:
Relative (or Static) — Sticky positioning elements are similar to relative and static positions because it preserves the natural gaps in the DOM (left in the stream). Fixed — When an element is stuck, it behaves exactly as position: fixed, floats at the same position as the viewport, and is removed from the stream. Absolute — At the end of the paste area, elements stop and stack on top of another element, just as an absolute positioned element is placed in a Position: Relative container.
Sticked to the bottom?
In most cases, you can paste elements to the top using sticky positioning, like this:
.component{
position: sticky;
top: 0;
}This is exactly what it was designed to do, and until then, it was only possible to do this in JavaScript.
But you can also use it to stick elements to the bottom. This means that you can define the footer as sticky and make it look like it’s always stuck at the bottom when scrolling down. When the end of the sticky container is reached, the element stops in its natural place. It is best to use it on elements that have a natural location at the bottom of a sticky container.
Complete example:
HTML
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>CSS
.main-footer{
position: sticky;
bottom: 0;
}To CodePen view demonstration effect: https://codepen.io/elad2412/p…
I often use it for pasting summary tables in development, but also for sticky footer navigation, which works well.
Browser Support
- All the popular modern browsers, except the older Internet Explorer, support sticky targeting.
- If you’re using Safari, you need to add it
-webkitPrefix.
position: -webkit-sticky; /* Safari */
position: sticky;
The last word
That’s the end of this article, and I hope you enjoyed it and learned something from my experience. If you like this article, I would really appreciate your applause and sharing 🙂
