Created
October 12, 2016 15:26
-
-
Save ivapie/0054c23aaadf52e9ee3897769255e047 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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