/Javascript/jQuery/Jquery fixed element on scroll footer

Jquery fixed element on scroll footer

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();
});

Source: stackoverflow.com

Similar codes

33 votes312 views3 answers
Prevent default jquery
Javascript jQuery
0 vote364 views1 answer
Jquery success refresh page
Javascript jQuery
2 votes386 views2 answers
First letter capital in jquery
Javascript jQuery
4 votes336 views1 answer
Jquery remove elemtns
Javascript jQuery
4 votes310 views1 answer
Jquery filter array remove empty values
Javascript jQuery
0 vote317 views1 answer
JQuery delete all spans in a div
Javascript jQuery
13 votes333 views3 answers
Jquery find tag and class
Javascript jQuery
0 vote403 views1 answer
Jquery get selected checkbox items and pass to parameter for C# MVC consumption
Javascript jQuery
2 votes351 views2 answers
Append before parent jquery
Javascript jQuery
0 vote341 views2 answers
Trigger play video jquery
Javascript jQuery