I am using this code suggested on these forums and it works great but I would like to fix one bug.
I would like the box stop at the certain div?
When you scroll it starts floating and then when reaches <div id="footer">
stop!
<style type="text/css">
.el1{position:fixed;top:15px;right:0;width:100%;background:#f9f9f9;border-bottom:1px solid #cecece;padding:5px 10px 10px;}
.el2{ position: fixed;left:17px;top: 13px;width: 50%;z-index: 10;}
</style>
<script type='text/javascript'>
function findPosY(obj) {
var curtop = 0;
if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
curtop += obj.offsetTop;
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
function stickElement(id, className){
el = document.getElementById(id);
if(el.dataset.initialized !== "true"){
el.dataset.position = findPosY(el);
el.dataset.initialized = "true";
}
if(pageYOffset > el.dataset.position){
el.classList.add(className);
} else {
el.classList.remove(className);
}
};
window.addEventListener("scroll", function(){
stickElement('floating_share_buttons', "el1");
stickElement('socials2', "el2");
});
</script>