/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

1 vote204 views2 answers
Accessing via name jquery
Javascript jQuery
1 vote189 views1 answer
JQuery UI Sortable, then write order into a database
Javascript jQuery
0 vote263 views1 answer
How to toggle fa fa-caret-down and fa fa-caret-up using jquery
Javascript jQuery
33 votes205 views4 answers
Jquery addeventlistener
Javascript jQuery
0 vote211 views1 answer
Dynamic select option dropdown in jquery
Javascript jQuery
1 vote242 views1 answer
Post antiforgerytoken jquery
Javascript jQuery
0 vote213 views1 answer
Jquery set multiple attribute value
Javascript jQuery
20 votes228 views5 answers
Get text selected option jquery
Javascript jQuery
2 votes205 views2 answers
Jquery select input with empty value
Javascript jQuery
60 votes204 views6 answers
Get value by id in jquery
Javascript jQuery