Flexslider body scroll only for current slide (V2)

Question

I have a Flexslider holding all of the content for a project. Each "page", or slide in this case, has different content such as updates, projects, about, and contact.

The pages have different lengths, and some require a scrollbar while others do not. On the pages that do not need to scroll, there is a large empty space underneath the content. This space is occupied on other pages by content.

I'm using jQuery to find the height of li.flex-active-slide and of the window, and this works fine. I'm having trouble figuring out how to tell jQuery when the li.flex-active-slide class changes when clicking through the navigation.

Here is my code for Flexslider:

$(document).ready(function() {
    //set some variables for calculating the hash
    var index = 0, hash = window.location.hash;
    //via malsup (Cycle plugin), calculates the hash value
    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }
    $(window).trigger('resize');
    $('#mainflexslider').flexslider({
        animation: "fade",
        slideDirection: "horizontal",
        keyboardNav: false,
        slideshow: false,
        animationSpeed: 500,
        controlsContainer: ".flex-container",
        manualControls: ".flex-control-nav li",
        startAt: index,
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
        }
    });
});

(Side note: URL is being updated while clicking through navigation. Credit for the question and corresponding answer is here.)

And for finding the height:

$(window).load(function() {
    var slideHeight = $("li.flex-active-slide").height();
    var windowHeight = $(window).height();

    if (slideHeight > windowHeight) {
        $('html, body').css('overflowY', 'auto');
    }
    else {
        $('html, body').css('overflowY', 'hidden');
    }
});

I'm wondering if there is a way to combine these two codes?

If not, how can I tell jQuery when Flexslider is appending the li.flex-active-slide class?

Answer 1

you can try this

$(window).load(function() {
var index = 0, hash = window.location.hash;
//via malsup (Cycle plugin), calculates the hash value
if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1;
}
$(window).trigger('resize');
$('.flexslider').flexslider({
    animation: "fade",
    slideDirection: "horizontal",
    keyboardNav: false,
    slideshow: false,
    animationSpeed: 500,
    controlsContainer: ".flex-container",
    manualControls: ".flex-control-nav li",
    startAt: index,
    after:function(slider){
        window.location.hash = slider.currentSlide+1;
        sliderheight();
    },
    start:function(slider){
        sliderheight();
    }
});
function sliderheight(){
    var slideHeight = $("li.flex-active-slide").height();
        var windowHeight = $(window).height();
        console.log(slideHeight+" > "+windowHeight);
        if (slideHeight > windowHeight) {
            $('html, body').css('overflow-y', 'auto');
        }
        else {
            $('html, body').css('overflow-y', 'hidden');
        }
}
});    

create a function with all the code for overflow-y and call it from the callback, it can be on before,after or start