JSFiddle - React, Tailwind, and code Playground
JavaScript
$(document).ready(function() {
// Determine where the followbox resides and return 0, 1 or 2 depending on it
function shouldFollow(scrollPos, originalPos, footerPos, followBoxHeight) {
if ( scrollPos > ( originalPos - 44 ) && scrollPos <= ( footerPos - followBoxHeight - 64 ) ) {
var ret = 1;
}
else {
var ret = 0;
}
if ( scrollPos > ( footerPos - followBoxHeight - 64 ) ) {
var ret = 2;
}
// console.log(ret);
return ret;
}
// Get elements left position
function getLeftPosition(element) {
var leftValue = 0;
while ( element ) {
leftValue += element.offsetLeft;
element = element.offsetParent;
}
return leftValue;
}
if( !$.browser.msie6 ) {
// Get the positions of the followbox from left and top, the users scroll position from top, the followboxes height and footers starting position
var originalPos = getPosition( document.getElementById('followbox_leftanchor') );
var scrollPos = $(window).scrollTop();
var leftPos = getLeftPosition( document.getElementById('followbox_leftanchor') );
var footerPos = getPosition( document.getElementById('footer') );
var followBoxHeight = $('#followbox').find('div').height(); // this also gets updated when clicking accordeon tabs
// Every time the user resizes his browser window, we need to recalculate our positions
$(window).resize(function() {
var originalPos = getPosition( document.getElementById('followbox_leftanchor') );
var scrollPos = $(window).scrollTop();
var leftPos = getLeftPosition( document.getElementById('followbox_leftanchor') );
var footerPos = getPosition( document.getElementById('footer') );
var followBoxHeight = $('#followbox').find('div').height(); // this also gets updated when clicking accordeon tabs
$('#followbox').css('left', leftPos + 'px');
});
// Every time the user scrolls
...