I recently developed a custom script based on the original jQuery code found at this link:
However, I encountered issues when attempting to implement it with prototype JS. Specifically, there seems to be accuracy problems with calculating the upper and lower height.
Any insights or suggestions would be greatly appreciated. I have included my code below and a link to see the live version of the script in action.
Website experiencing issues:
Prototype:
document.observe('dom:loaded', function() {
Element.addMethods({
floatingWidget: function(el, classes) {
var $this = $(el),
$parent = $this.getOffsetParent(),
$window = $(window),
top = $this.positionedOffset().top - parseFloat($this.getStyle('marginTop').replace(/auto/, 0)),
bottom = $parent.positionedOffset().top + $parent.getHeight() - $this.getHeight();
if ($parent.getHeight() > $this.getHeight()) {
Event.observe($window, 'scroll', function (e) {
var y = document.viewport.getScrollOffsets().top;
if (y > top) {
$this.addClassName(classes.floatingClass);
if (y > bottom) {
$this.removeClassName(classes.floatingClass).addClassName(classes.pinnedBottomClass);
} else {
$this.removeClassName(classes.pinnedBottomClass);
}
} else {
$this.removeClassName(classes.floatingClass);
}
});
}
return el;
}
});
$('floating-widget').floatingWidget({
floatingClass: 'floating',
pinnedBottomClass: 'pinned-bottom'
});
});