/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

6 votes391 views3 answers
Jquery accept only excel file
Javascript jQuery
34 votes314 views3 answers
Jquery set value by name
Javascript jQuery
0 vote360 views1 answer
How to get query param in jquery
Javascript jQuery
0 vote321 views1 answer
Get an element from outside of iframe jquery
Javascript jQuery
49 votes268 views6 answers
How to get selected radio button value in jquery
Javascript jQuery
0 vote333 views1 answer
Jquery hide select option
Javascript jQuery
19 votes297 views6 answers
Jquery document ready shorthand
Javascript jQuery
0 vote324 views1 answer
Create a form and submit it dynamically jquery
Javascript jQuery
0 vote344 views2 answers
Jquery empecher revoie du formulaire
Javascript jQuery
8 votes335 views5 answers
Get select2 selected value jquery
Javascript jQuery