/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

29 votes174 views5 answers
How to get the value of radio button in jquery
Javascript jQuery
5 votes174 views1 answer
On radio button change jquery
Javascript jQuery
12 votes186 views3 answers
How to move div using jquery
Javascript jQuery
0 vote200 views1 answer
How can I redirect the user from one page to another using jQuery or pure JavaScript?
Javascript jQuery
1 vote168 views1 answer
Jquery iterate obj
Javascript jQuery
50 votes164 views4 answers
Jquery add class to body
Javascript jQuery
0 vote198 views1 answer
Jquery add url parameter to link dynamically by class
Javascript jQuery
5 votes162 views3 answers
Jquery check if all checkbox is not checked
Javascript jQuery
13 votes173 views3 answers
Jquery switch class
Javascript jQuery
57 votes157 views2 answers
Use jquery
Javascript jQuery