using Vegas Background slideshow with isInViewport.js

I am trying to use the Vegas Background Slidshow with the isInViewport.js plugin as follows:

$(document).ready(function() {

//body#index header
$("body#index header").vegas({
delay: 10000,
transitionDuration: "auto",
overlay: "../images/overlays/06.png",
slides: [
{ src: "../images/home/home_header.jpg" },
],
});

//body#index section#content-top
$(function() {
if ($('body#index section#content-top').is(':in-viewport')) {
$('body#index section#content-top').vegas({
delay: 10000,
overlay: "../images/overlays/06.png",
slides: [
{ src: "../images/home/home_content_top.jpg" },
],
animation: "kenburns"
});
}
});

//body#index section#content-bottom
$(function() {
if ($('body#index section#content-bottom').is(':in-viewport')) {
$('body#index section#content-bottom').vegas({
delay: 10000,
overlay: "../images/overlays/06.png",
slides: [
{ src: "../images/home/home_content_bottom.jpg" },
],
animation: "kenburns"
});
}
});

});

However only the top code block works while the bottom two with the if statements don't work and the slideshow starts even if the elements are not in viewport.

I am trying to play the slideshow for the body#index header on page load, body#index section#content-top when its is viewport and also body#index section#content-top when in viewport.

If I use the $(window).scroll(function() {}, it works but also has the same problem. The slideshow starts even if the element is not in viewport.