Semantic-UI Sticky Push
Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.
Semantic UI Sticky content remains fixed to the browser viewport until another content on the viewport is visible.
Semantic UI Sticky Push will allow the viewport to push the sticky content according to scroll direction. If scrolling down, the sticky sticks to the top of the viewport, and when reversed in the direction of scrolling, the sticky sticks to the bottom of the viewport.
Semantic UI Sticky Push option:
- pushing: Setting this option to true, the sticky element can be pushed by viewport to top or bottom according to scrolling direction.
Syntax: Add the pushing option to the sticky element to enable pushing as follows.
$('.ui.sticky').sticky({
pushing: true,
})
Example: In the following example, we have two sticky elements with the pushing enabled.
HTML
<!DOCTYPE html> <html> <head> <link href= rel="stylesheet" /> <script src= </script> <script src= </script> <style> body { padding: 10px; margin: 10px; } #container1 { height: 1000px; } #container2 { height: 1000px; } #container3 { height: 1000px; } </style> </head> <body> <div class="ui container"> <center> <div class="ui header green"> <h1> GeeksforGeeks </h1> </div> <strong> Semantic UI Sticky Push </strong> </center> </div> <div class="ui segment" id="container1"> <h1>Welcome to GeeksforGeeks</h1> <p>Find the best programming tutorials here.</p> <div class="ui sticky" id="first"> <h3>First Sticky</h3> <ul> <li>Data Structures</li> <li>Algorithms</li> </ul> </div> </div> <div class="ui segment" id="container2"> <h1>Welcome to GeeksforGeeks</h1> <p>Computer science portal for geeks.</p> <div class="ui sticky" id="second"> <h3>Second Sticky</h3> <ul> <li>Machine Learning</li> <li>Web development</li> </ul> </div> </div> <div class="ui segment" id="container3"> <p> Scroll down and then above to see the sticky element sticking to bottom of viewport. </p> </div> <script> $('.ui.sticky#first').sticky({ context: '#container1', pushing: true, }) $('.ui.sticky#second').sticky({ context: '#container2', pushing: true, }) </script> </body> </html> |
Output:
Semantic-UI Sticky Push
Reference link: https://semantic-ui.com/modules/sticky.html
Please Login to comment...