Semantic-UI Sticky Oversized Content

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 Oversized Content helps to scroll down the sticky element whose size is larger than the viewport. So the sticky is scrolled down first and then the sticky element is aligned to the top corner. Semantic UI adjusts this automatically and hence it has no classes or options.

Syntax: Initialize your oversized sticky as follows:

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

Example: In the following example, we have an oversized sticky element that we will scroll down.

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: 1500px; 
      } 
      #container2 { 
        height: 1000px; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1> GeeksforGeeks </h1> 
        </div> 
        <strong>Semantic UI Sticky Oversized Content </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>Over Sized Sticky</h3> 
        <ul> 
          <li>Data Structures</li> 
          <li>Algorithms</li> 
          <li>Machine Learning</li> 
          <li>Web development</li> 
          <li>Java</li> 
          <li>C#</li> 
          <li>C</li> 
          <li>C++</li> 
          <li>Python</li> 
          <li>jQuery</li> 
          <li>Javascript</li> 
          <li>Competitive Programming</li> 
          <li>Topic-wise Practice</li> 
          <li>Gate CS/IT Preparation</li> 
          <li>Puzzles</li> 
          <li>Campus Ambassador</li> 
          <li>Testimonials</li> 
          <li>Placement Course</li> 
          <li>Careers</li> 
          <li>SQL</li> 
          <li>HTML</li> 
          <li>Perl</li> 
          <li>Scala</li> 
          <li>Go</li> 
          <li>PHP</li> 
          <li>Operating System</li> 
          <li>Computer Networks</li> 
          <li>Analysis of Algorithms</li> 
          <li>Searching Algorithms</li> 
          <li>Graph Algorithms</li> 
          <li>Sorting Algorithms</li> 
          <li>Bitwise 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> 