CSS Position Sticky

By July 1, 2017 Css, Html No Comments
positionsticky

What is position:sticky?

Wow what  a great new feature introduced in CSS, Sticky position is really awesome, it can reduce extra effort write JavaScripe or jQury to fix an div or element inside a div.

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with  position: sticky behaves like  position: relative within its parent, until a given offset threshold is met in the viewport.

By simply adding  position: sticky (vendor prefixed), we can tell an element to be  position: relative until the user scrolls the item (or its parent) to be 15px from the top:

At top: 20px, the element becomes fixed.

Demo:

 

As  CSS position: sticky is new and till now it doesn’t have all browser support, it depends on your target audience. If your website users are using mordern browser, you can go for it, but if you want the same consistabce output  accrox all browser, you can do this position:fixed or absolute with some JS or JQuery Code.

Here is the complete list of STICKY css browser support.

positionsticky

http://caniuse.com/#search=sticky

Other CSS position and values:

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

Static

Static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.

Relative

Relative behaves the same as static unless you add some extra properties. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Absolute

Absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a “positioned” element is one whose position is anything except static.

Fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used.

 

Sticky

The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including  table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘ position: sticky’ on table related elements is the same as for ‘ position: relative’.


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply