Semantic-UI Sticky to Own 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.

Semantic UI Sticky content remains fixed to the browser viewport while other content on the viewport is visible.

Semantic UI Sticky Own Context without any context sticks to its own context. It is by default and nothing is required to be specified. The content may overlap with the sticky element. Initialize the Sticky and it will use its own context as follows.

Syntax:

$('.ui.sticky').sticky({})

Example: In the following example, we have sticky content placed inside a container that sticks to its own context that is the container where it is placed.

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 class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> GeeksforGeeks </h1> 
        </div> 
        <strong> Semantic UI Sticky to Own 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> 
  
    <script> 
      $('.ui.sticky#first').sticky({}) 
    </script> 
  </body> 
</html> 