tifani
0
Q:

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","");
        }
    }
1
nav {
	position:sticky;
	top:0;
}

/*Top can be replaced with bottom, left, or right 
	depending on what you want :) */
2

  // When the user scrolls the page, execute myFunction 
window.onscroll = 
  function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// 
  Get the offset position of the navbar
var sticky = navbar.offsetTop;

  
// Add the sticky class to the navbar when you reach its scroll position. 
  Remove "sticky" when you leave the scroll position
function myFunction() {
  
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  
  } else {
    navbar.classList.remove("sticky");
  }

  } 
0

New to Communities?

Join the community