Breaking News: Grepper is joining You.com. Read the official announcement!

jquery fixed element on scroll footer

Weary Wildebeest answered on July 14, 2021 Popularity 4/10 Helpfulness 4/10

answer jquery fixed element on scroll footer

jquery fixed element on scroll footer

Comment

var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');

function checkOffset() {
  function getRectTop(el){
    var rect = el.getBoundingClientRect();
    return rect.top;
  }
  
  if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    socialFloat.style.position = 'absolute';
  if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    socialFloat.style.position = 'fixed'; // restore when you scroll up
  
  socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}

document.addEventListener("scroll", function(){
  checkOffset();
});

Popularity 4/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: element fixed footer javascript jquery scroll

Link to this answer
Share Copy Link