Semantic-UI Sticky Push
Last Updated :
20 Feb, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...