Semantic-UI Sticky Examples

Last Updated : 22 Dec, 2022

Semantic UI Sticky content remains fixed to the browser viewport until another content on the viewport is visible. Semantic UI also offers configurations that allow us to control the scroll direction of the sticky content, and determine the parent viewport or the oversized content.

Syntax:

$('.ui.sticky')
  .sticky({
     context: '#contentId'
  })
;

Example 1: In this example, we will determine the adjacent context to which the sticky element will stick to.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
        body { 
            padding:10px; 
            margin:10px; 
        } 
        #container1 { 
            height: 1000px; 
        } 
        #container2 { 
            height: 1000px; 
        } 
    </style> 
</head> 
<body> 
    <div> 
        <center> 
            <div class="ui header green"> 
            <h1> GeeksforGeeks </h1> 
            </div> 
            <strong> Semantic UI Examples </strong> 
        </center> 
    </div> 
    <div 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 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> 
    <script> 
        $('.ui.sticky#first').sticky({ 
            context: '#container1', 
        }) 
        $('.ui.sticky#second').sticky({ 
            context: '#container2', 
        }) 
    </script> 
</body> 
</html> 

Output:

Example 2: In the following example, we have two sticky elements with the pushing enabled, so that the viewport pushes the sticky content with the scroll direction.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"
    /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
    body { 
        padding: 10px; 
        margin: 10px; 
    } 
    #container1 { 
        height: 1000px; 
    } 
    #container2 { 
        height: 1000px; 
    } 
    </style> 
</head> 
<body> 
    <div> 
        <center> 
            <div class="ui header green"> 
                <h1> GeeksforGeeks </h1> 
            </div> 
            <strong> Semantic UI Examples </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> 
    <script> 
        $('.ui.sticky#first').sticky({ 
            context: '#container1', 
            pushing: true 
        }) 
        $('.ui.sticky#second').sticky({ 
            context: '#container2', 
            pushing: true 
        }) 
    </script> 
</body> 
</html> 