滚动时根据视图隐藏/显示元素

Question

听起来像一个简单的waypoint.js和animate.js问题，但它有点不同。我正在使用'isScrolledIntoView'元素，但问题是页面上可以同时查看多个元素。理想情况下，我希望显示第一个元素，直到下一个元素完全可见，这样一次只能存在一个元素。现在我遇到了同时显示多个元素的问题，这使得一个不太好的演示文稿。这是我尝试过的，这是我试过的网站。

浮球显示取决于滚动位置的不同元素。我相信你能在这个例子中看到问题。

http://www.omnihustle.com

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#home-screen'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
        $(".coupontooltip").show("slow");


    } else {
    $(".coupontooltip").hide("slow");            

    }
});
});

</script>



<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#services'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
          $(".coupontooltip2").show("slow");




    } else {
        $(".coupontooltip2").hide("slow");

    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#agents'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip3").show("slow");



    } else {
        $(".coupontooltip3").hide("slow");
    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#portal'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip4").show("slow");



    } else {
        $(".coupontooltip4").hide("slow");
    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#webdesign'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip5").show("slow");



    } else {
        $(".coupontooltip5").hide("slow");
    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#social'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip6").show("slow");



    } else {
        $(".coupontooltip6").hide("slow");
    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#pvf'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip7").show("slow");



    } else {
        $(".coupontooltip7").hide("slow");
    }
});
});

</script>

<script>

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var myelement = $('#pricing'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
            $(".coupontooltip8").show("slow");



    } else {
        $(".coupontooltip8").hide("slow");
    }
});
});

</script>