CSS Position Sticky

The position: sticky property in CSS combines elements of both position: relative and position: fixed.

An element with position: sticky is positioned based on the user's scroll position and the normal flow of the document. It acts like position: relative until the user scrolls to a specified threshold, at which point it becomes position: fixed.

Basic Syntax

        
            selector {
   position: sticky;
   top: value;
   right: value;
   bottom: value;
   left: value;
}
        
    

top, right, bottom and left determine the distance of the element from the respective edges of its containing block.

Sticking Behavior and Properties

• Use these properties to specify the offset values for the sticking behavior.
• The element will stick within its containing block while scrolling within those offsets.

• An element with position: sticky sticks to the screen when it reaches a specified position during scrolling.
• It then "unsticks" when the scroll reaches another specified position.

        
            .container{
    position: relative;
    margin-top: 200px;
}

.sticky-box{
    position:sticky;
    background: red;
    top: 0;
}

.box, .box-1, .sticky-box{
    height: 100px;
    width: 100px;
}
.box{
    background: green;
}
.box-1{
    background: orange;
}
        
    

Use Cases

Create a sticky table header that stays visible as users scroll through a long table.

Implement sticky navigation menus that remain accessible as users scroll down a webpage.