Css Sticky

What is Sticky in CSS?

The position: the sticky property is what allows these two options to keep their relative and fixed positioned behaviors.

The sticky point remains keeked according to the position of the scroll and the relative or fixed position represented as the scrolling reaches a prescribed level.

Basic Sticky Header:

This example creates a basic sticky header that sticks to the top of the viewport when the user scrolls.

                          
                            .header {
                                position: sticky;
                                top: 0; /* Stick the element to the top of the viewport */
                                background-color: #3498db;
                                padding: 10px;
                            }

Sticky Sidebar:

This example creates a sticky sidebar that becomes fixed 20 pixels from the top of the viewport when scrolling.

                          
                            .sidebar {
                                position: sticky;
                                top: 20px; /* Stick the element 20px from the top of the viewport */
                                background-color: #2ecc71;
                                padding: 10px;
                            }

Sticky Table Header:

This example creates a sticky table header that remains visible at the top of the container when scrolling through a long table.

                          
                            .table-container {
                                max-height: 300px;
                                overflow-y: auto;
                            }
                            
                            .table thead th {
                                position: sticky;
                                top: 0; /* Stick the table header to the top of the container */
                                background-color: #3498db;
                            }

Sticky Navigation with Z-Index:

This example creates a sticky navigation bar with a higher z-index to keep it on top of other elements.

                          
                            .navbar {
                                position: sticky;
                                top: 0;
                                background-color: #3498db;
                                z-index: 100; /* Set a higher z-index to keep the navigation on top of other elements */
                            }

Sticky Footer:

This example creates a sticky footer that sticks to the bottom of the viewport.

                              
                                .footer {
                                    position: sticky;
                                    bottom: 0; /* Stick the element to the bottom of the viewport */
                                    background-color: #2ecc71;
                                    padding: 10px;
                                }

Sticky Element with JavaScript Trigger:

This example is implemented with JavaScript to class (sticky) an element provided the trigger condition such as scrolling.

                              
                                .element {
                                    position: relative;
                                    top: 0;
                                    transition: top 0.3s ease; /* Add a smooth transition for the top property */
                                }
                                
                                .sticky {
                                    position: fixed;
                                    top: 20px; /* Stick the element 20px from the top of the viewport */
                                    background-color: #3498db;
                                    padding: 10px;
                                }