Skip to content

Instantly share code, notes, and snippets.

@ivapie
Created October 12, 2016 15:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ivapie/0054c23aaadf52e9ee3897769255e047 to your computer and use it in GitHub Desktop.
Save ivapie/0054c23aaadf52e9ee3897769255e047 to your computer and use it in GitHub Desktop.
let FloatingBox = (function() {
let elements = {
leftColumn: null,
popularBox: null,
floatingBox: null,
newPosition: null,
defaultPosition: "0px",
porcent: null,
gutter: null
}
function start() {
setTimeout(function(){
let positionTop = elements.defaultPosition;
if(window.pageYOffset > 0){
let dom = document;
// Element Assign
elements.leftColumn = dom.querySelector(".qb-float-component .col-md-8").getBoundingClientRect();
elements.popularBox = dom.querySelector(".qb-float-component .qb-post-popular-component").getBoundingClientRect();
elements.floatingBox = dom.querySelector(".qb-float-component .qb-call-in-action-floating-component");
// Variables Assign
elements.porcent = (elements.leftColumn.height * 0.6);
elements.gutter = (elements.leftColumn.height - Math.abs(elements.leftColumn.top)) - window.innerHeight;
positionTop = onScroll();
}
return elements.floatingBox.style.marginTop = positionTop;
}, 500);
}
function onScroll(event) {
if ((Math.abs(elements.leftColumn.top)) >= elements.popularBox.height) {
elements.newPosition = relocation();
} else {
elements.newPosition = elements.defaultPosition;
}
return elements.newPosition;
}
function relocation() {
let newTop = null;
let viewPortMargin
if (Math.abs(elements.leftColumn.top) < elements.porcent) {
viewPortMargin = elements.leftColumn.height -
(elements.leftColumn.height - elements.leftColumn.top);
newTop = Math.abs(viewPortMargin) + "px";
} else {
newTop = (elements.leftColumn.height - elements.floatingBox.getBoundingClientRect().height
- elements.popularBox.height) + "px";
}
return newTop;
}
return {
start: start,
onScroll: onScroll,
relocation: relocation
}
})();
window.addEventListener("scroll", FloatingBox.start, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment