Ufdjrw

When I use the code below, when I scroll the sidebar flashes back and forth. testing found that it is because the winTop >= (contentTop - header.height()) condition fails every other scroll iteration.

The idea is that there is a sidebar on the page that sticks on scroll until it hits the footer, then it positions absolutely to the bottom of its container until scrolling back up.

It does everything correctly except that condition fails every other "click" of the scroll wheel, causing the sidebar to flash violently.

Here is a live example: http://www-icoachfirst-com.sandbox.hs-sites.com/test-lptest-lp

jquery:

var $window = $(window),
 header = $('.header'),
 sidebar = $('#sidebar'),
 content = $('#content'),
 container = $('.floattrap'),
 footer = $('.footer_main');

$(window).on('load scroll resize', function()
 var contentTop = sidebar.offset().top,
 winTop = $(window).scrollTop(),
 footerTop = footer.offset().top;

console.log(winTop);
 if (winTop >= (contentTop - header.height())) 

 if (footerTop <= (winTop + $window.height())) 
 sidebar.removeClass('stuck');
 sidebar.addClass('bot');
 console.log(true);
 else 
 sidebar.removeClass('bot');
 sidebar.addClass('stuck');

 $('.stuck').css(
 'top': (header.outerHeight(true) + 20),
 'left': (content.offset().left + content.width()),
 'right': (container.offset().left + container.width())
 );

 console.log(false);

 
 else 
 console.log('fail');
 sidebar.removeClass('stuck');
 sidebar.removeClass('bot');
 
 );

I had a variable wrong. contentTop was set to the top offset of the sidebar I was trying to float so it was going crazy. I meant to set it to the top offset of the content block on the left for stability.