/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

0 vote250 views1 answer
Can we use two versions of jquery in same page
Javascript jQuery
0 vote244 views2 answers
Jquery selector parent on hover
Javascript jQuery
-1 vote198 views3 answers
Jquery json to table
Javascript jQuery
13 votes200 views6 answers
Scroll to top jquery
Javascript jQuery
0 vote206 views1 answer
Sending string variable to .net mvc using Ajax JQuery
Javascript jQuery
17 votes212 views4 answers
Jquery set select value
Javascript jQuery
0 vote188 views1 answer
Jquery create element properties
Javascript jQuery
15 votes278 views4 answers
How to detect a section is visible in jquery
Javascript jQuery
0 vote205 views1 answer
JQuery exclude exteranl link for images
Javascript jQuery
0 vote205 views1 answer
Convert jquery hide function to pure javascript code
Javascript jQuery