matchheights maintain scroll not working.

[ajlaporte]

I am using the matchheighs along with the maintain scorll option set to true on this page: http://info.cpilink.com/test-page-wsol?hs_preview=diFaZCwd-4488529354

For some reason, when the slide in the rotator changes (rotator is a hubspot rotator that uses FlexSlider) and I call matchHeights to update, it jumps it to the top of the page.

Here is the JS code I have:

<script>
$( window ).load(function() {
    
   
    
  //if there is a FlexSlider on the page, delay the firing of matchHeights by 200 miliseconds. This is needed because the flexslider loads after the page loads. Delaying this allows the sidebar to become the same height correctly. 
    if ( $('.hs_cos_flex-slider').length){
        //200 miliseconds (0.2 seconds) delay
        setTimeout(function() {
            $('.matchHeight').matchHeight();
        }, 200);        
        
    }
    //if the Flexslider is not on the page then fire matchHeights right away
    else {
        console.log("No Flex Slider Present");
        $('.matchHeight').matchHeight();    
    }

 $('.hs-input').on('keyup blur focus', function() {
        $.fn.matchHeight._maintainScroll = true;
        $.fn.matchHeight._update();

 }); 

 
});

// Slider Configuration
window.hsSliderConfig = window.hsSliderConfig || {};
window.hsSliderConfig['widget_1481563526812'] = {
    mode: 'slider',
    mainConfig: {
        "animationLoop":true,
        "direction":"horizontal",
        "slideshowSpeed":5000.0,
        "controlNav":true,
        "smoothHeight":true,
        "namespace":"hs_cos_flex-",
        "slideshow":true,"selector":".hs_cos_flex-slides > li",
        "animation":"fade","after":function(){
            console.log("slide switched");
            $.fn.matchHeight._maintainScroll = true;
            $.fn.matchHeight._update();    
        }
    }
};
</script>

Any assistance you can provide would be very helpful. Thank you.

[timver]

Looks like this problem came along a couple of times. This is caused by $(window).scrollTop() returning 0. And when you multiply by 0 ...

Why is it often 0? Because people tend to set height: 100% on html, body tags. Or in my case I'm using overflow containers and set overflow: hidden on the body. But I guess that makes sense why it returns 0.

Question is if you can work around this, and if you should. Haven't come up with a better solution but least you know why people can't maintain scroll positions from time to time.

[liabru]

Interesting, thanks for the tip!