Semantic-UI Sticky to Adjacent Context

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.

Using the Semantic UI Sticky component, the content remains fixed to the browser viewport until another content on the viewport is visible.

Semantic UI Sticky to Adjacent Context attaches the sticky content to the viewport and remains fixed until the viewport passes and a new viewport starts. We pass the context as id or class of viewport to the sticky element.

Semantic UI Sticky to Adjacent Context Option:

context: We need to pass the reference to the viewport to which the sticky need to be fixed as context.

Syntax: Pass the context to the sticky element as follows:

$('.ui.sticky').sticky({
    context: '#container1',
})

Example: In the following example, we have two containers with two sticky elements.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <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: 500px; 
        } 
  
        #container2 { 
            height: 500px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <strong> 
                Semantic UI Sticky to Adjacent Context 
            </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', 
        }) 
        $('.ui.sticky#second').sticky({ 
            context: '#container2', 
        }) 
    </script> 
</body> 
  
</html>