css position sticky code example

Example 1: sticky operations in javascript

var siteHeader = document.getElementById('siteHeader'),
    siteNav = document.getElementById('siteNav');

    window.onscroll = function() {
        if ( siteNav.offsetTop < document.documentElement.scrollTop + 26 || siteNav.offsetTop < document.body.scrollTop + 26) {
            siteHeader.setAttribute("class","sticky");
        }
        else {
            siteHeader.setAttribute("class","");
        }
    }

Example 2: css position

h2.pos_left {
  position: relative;
  left: -20px;
}

h2.pos_right {
  position: relative;
  left: 20px;
}

Example 3: how to make a div sticky using js

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to make make a div stick to  
      the top of the screen once it’s  
      been scrolled to? 
    </title> 
    <style> 
        .sticky-div { 
            background-color: green; 
            position: relative; 
            width: 100%; 
            padding: 10px 0px; 
        } 
          
        .start { 
            height: 100px; 
        } 
          
        .end { 
            height: 500px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
    GeeksforGeeks 
  </h1> 
    <b> 
    How to make make a div stick 
    to the top of the screen once 
    it’s been scrolled to? 
  </b> 
    <p class="start"> 
        A Computer Science portal for geeks. 
      It contains well written, well thought 
      and well explained computer science and 
      programming articles, quizzes and  
      practice/competitive programming/company  
      interview Questions. 
    </p> 
    <div class="sticky-div"> 
        This is div will stick to the top when it has been scrolled past 
    </div> 
    <p class="end"> 
        A Computer Science portal for geeks.  
      It contains well written, well thought  
      and well explained computer science and 
      programming articles, quizzes and  
      practice/competitive programming/company 
      interview Questions. 
    </p> 
    <script> 
        stickyElem = 
            document.querySelector(".sticky-div"); 
  
        /* Gets the amount of height 
        of the element from the 
        viewport and adds the 
        pageYOffset to get the height 
        relative to the page */ 
        currStickyPos =  
          stickyElem.getBoundingClientRect().top + window.pageYOffset; 
  
        window.onscroll = function() { 
  
            /* Check if the current Y offset 
            is greater than the position of 
            the element */ 
            if (window.pageYOffset > currStickyPos) { 
                stickyElem.style.position = "fixed"; 
                stickyElem.style.top = "0px"; 
            } else { 
                stickyElem.style.position = "relative"; 
                stickyElem.style.top = "initial"; 
            } 
        } 
    </script> 
</body> 
  
</html>

Example 4: html position div

<!DOCKTYPE html> <!-- Start of coding page -->
<html> <!-- Start of html coding -->
  <head> <!-- Start of head -->
    <title>TITLE<title> <!-- Title -->
    <script>
      //JavaScript
    </script>
    <style>
      /* CSS */
    </style>
  </head> <!-- End of head -->
  <body> <!-- Start of body -->
    <div id='mydiv' style = "position:relative; left:0px; top:100px;">
      Hello! 
      <!-- Use that style tag to positions things, have a play around with it! -->
    </div>
  </body> <!-- End of body -->
<html> <!-- End of html coding -->
<!-- Add this line of code next to your id: 

style = "position:relative; left:0px; top:100px;" 

too let you position divs where you want them, you can even position
them ontop of other divs! -->

Tags:

Html Example

Recent Posts