Css sticky and overflow

Combining position: sticky; with overflow: scroll;

Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within the overflowing container.

When working with overflows you might find that your sticky element isn’t so sticky after all, which may cause some frustration. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.

The solution is to use two scroll containers and sync up their scrolling position using a tad of JavaScript:

Let’s hope this quirky combination gets fixed in CSS itself. Until then we’ll need this JS-based solution.

❓ Not familiar with position: sticky; ? Check out this introduction then.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Join the Conversation

Nice post! Thanks for sharing. Some friendly feedback: in the post is not mentioned the syncscroll.js library and when someone get to the CodePen demo they could avoid noticing that is being loaded because the need to go to the config modal and to the JavaScript tab to see that the syncscroll.js library is being loaded. Thanks!

Leave a comment

Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About Bram.us

Bram.us is the technical/geeky weblog of Bramus Van Damme, a Freelance Web Developer from Belgium.

Main topics are web related technologies (CSS, JS, PHP, …), along with other geeky things (robots, space, …) and personal interests (cartography, music, movies, …).

Stay up-to-date

Next to his ramblings here, you may also follow @bramus himself on Twitter or on Mastodon.

Источник

Fixing CSS position sticky not working issues

Position:sticky CSS property is commonly used to create sticky headers or footers. We will go over a few problems and solutions when using this property.

Nov 30, 2022 | Read time 7 minutes

🔔 Table of contents

There are several possible solutions to fix position:sticky not working in CSS. This is depending on the source of the issue. Here are some suggested steps to try:

You are not specifying at least one of the CSS properties: top , left , right or bottom . Be careful though if you specify more than one of those. If both left and right are specified, left wins. Likewise, if top and bottom are used at the same time, top wins — Based on this bug

For not working in Safari browsers, you are not specifing the -webkit-sticky browser prefix. To be sure that you have covered all browsers, we can use the following declaration:

Internet Explorer, Edge 15 and earlier versions do not support sticky positioning

The parent element does not have it height or position:relative specified. This would need to apply to all parent elements of the sticky element and not just the immediate ancestor.

The parent element, such as a div is using the flex display. We need to also set the sticky element to have align-self: flex-start .

What is the position:sticky anyway?

Elements that are defined with position sticky are positioned normally based on the document flow. It will then “stick” with its nearest parent element’s scroll behaviour.

Below is a demo of how it should behave:

We can lay it out as follows:

When the parent element of a position sticky element is set as flex display, this will not work unless you have set the right CSS properties.

Consider the following HTML and CSS, we have the main element as display:flex and we want to make the child yellow element sticky

See the Pen Position Sticky Test by ⭐ Kentaro ⭐ (@kentaro_au) on CodePen.

This results in the above — we can see that the yellow element is not sticking at all. It just takes the height of the main element.

Since flex box elements default to stretch , all the elements are the same height — which does not allow scrolling and thus the sticky behaviour would not kick in.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling will fix it. The align-self: flex-start property overrides the flex item’s align-items value. In this case we use flex-start which put the flex item at the start of the parent.

Check Position:sticky with overflow (hidden, scroll or auto)

On the parent of the sticky element, AVOID using overflow:hidden , overflow:scroll , or overflow:auto .

Since sticky elements rely on the scrolling of the parent element — modifying overflow behaviour will break this.

However using overflow:visible or overflow:clip should be fine to keep your sticky elements desired behaviour.

Safari browser support for position:sticky

Support for position:sticky is widespread for most of the modern browsers (Chrome, Firefox, Edge, etc) however there are some cases we will need to consider. For Safari browsers, its best to use the vendor prefixes (-webkit-sticky):

There are other support issues that we need to consider when using this position:sticky :

• No support for IE 11 or lower versions
• Supported on th elements, but not thead or tr in Edge/Chrome
• Do not appear to support sticky table headers

The Javascript (old method)

We can use Javascript to mimic the same behaviour as position:sticky . This can be handy when you want to support older browsers such as IE or older versions of Safari.

The idea is to have a event listener on the scroll. As the user moves out of the viewport (scroll down), we apply a position:fixed to that element we want to stick.

As the user scrolls up and goes back into the view, we remove the position:fixed styling.

 This method is not prefered since it can make your page look janky since processing is done on the CPU side.

Using the default position sticky will shift process to the GPU (Graphical Processing Unit) and will appear more smooth.

Summary

• check the top, left, right and bottom is set,
• check the browser support — or use JavaScript if you want to support legacy browsers such as IE
• check that the parent is using flex or not — if flex is used, then the sticky element needs to have align-self:flex-start
• Make sure you are NOT using any overflow properties on the parent.

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

How to Fix Issues With CSS Position Sticky Not Working?

If you’re experiencing issues with the CSS position: sticky property, there are several factors you can examine to troubleshoot some common problems. You can consider the following checklist to address potential issues:

Checking for Browser Compatibility

Prior to investigating other potential problems, ensure that you are using a browser that supports the position: sticky property.

Checking if a Threshold Has Been Specified

A sticky element requires a threshold to be specified, which means that you must set a value other than » auto » for at least one of the following properties:

The threshold value that you set, will make the sticky element act as fixed positioned when it crosses the specified threshold, and a relatively positioned element otherwise.

Checking Vendor Prefix for Safari

Make sure you add a vendor prefix for the property value to support versions of Safari below 13, for example, like so:

Checking if an Ancestor Element Has overflow Property Set

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won’t work (unless you specify a height on the overflowing container):

Snippet to Check for Parents With overflow Property Set:

Simply copy/paste the following snippet in your browser’s web developer console to identify all parent/ancestor elements with overflow property set to something other than visible :

let parent = document.querySelector('.sticky').parentElement; while (parent) < const hasOverflow = getComputedStyle(parent).overflow; if (hasOverflow !== 'visible') < console.log(hasOverflow, parent); >parent = parent.parentElement; >

How to Make position: sticky Work With the overflow Property?

By specifying a height on the overflowing container, you should be able to make position: sticky work whilst having the container element have the overflow property set.

Checking if height Property Is Not Set on Parent

If the parent element has no height set then the sticky element won’t have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a containing element.

Checking if a Parent Element Is a Flexbox

If sticky element’s parent is a flexbox, there are two scenarios to check for:

If the Sticky Element Has align-self: auto Set:

In this case the value of align-self would compute to the parent’s align-items value. So, if the parent has align-items: normal (which is the default) or align-items: stretch set, then it means the height of the sticky element would stretch to fill the entire available space. This would leave no room for the sticky element to scroll within the parent.

If the Sticky Element Has align-self: stretch Set:

In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.

How to Make Sticky Element Scrollable Within a Flexbox:

You could simply set the value of the align-self property to align-self: flex-start . This would put the sticky element at the start and won’t stretch it.

Checking for Overriding Rules

You can make sure that the element you are applying the position: sticky property to is not being overridden by a more specific selector.

For example, consider the following HTML/CSS:

It could be the case, for example, that another CSS selector with higher specificity is overriding your selector and the CSS style rules on the element, such as the following:

To fix this, you can either remove the more specific selector, or make your selector more specific than the other one.

Hope you found this post useful. It was published 26 Apr, 2020 (and was last revised 14 Jun, 2023 ). Please show your love and support by sharing this post.

Источник

position : sticky

Уникальное позиционирование, которое создаёт липкий элемент.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент с position : sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Скопировать ссылку «Пример» Скопировано

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из :

 h1  position: sticky; top: 15px;> .squares__item:last-of-type  position: sticky; bottom: 15px;> h1  position: sticky; top: 15px; > .squares__item:last-of-type  position: sticky; bottom: 15px; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Блоки с «липким» позиционированием ведут себя как position : relative и position : fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position : fixed . А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position : relative .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .block  position: sticky; top: 15px;> .block  position: sticky; top: 15px; >    Скопировать Скопировано Не удалось скопировать   

Для блока, который должен быть «липко» позиционирован, указываем position : sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position : sticky не сработает.

💡 При вертикальном скролле работают только свойства top и bottom , при горизонтальном — left и right . Или их логические аналоги inset .

💡 position : sticky можно указать внутри родителя с overflow : scroll или overflow : auto .

💡 Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body , то, указав шапке position : sticky , мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.

Источник