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

听起来像是一个简单的waypoint.js和animate.js问题，但有点不同。我使用的是“isScrolledIntoView”元素，但问题是页面上可以同时查看多个元素。理想情况下，我希望第一个元素显示，直到下一个元素完全可见，以便一次只显示一个元素。现在我有一个问题，一个以上的元素显示在同一时间，这使得一个不太好的介绍。这是我试过的，这是我试过的网站

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

---

为什么要多次声明同一个函数。您还应该在全局范围内声明该函数，因此将其移到文档就绪处理程序之外。似乎需要添加到代码中的是在新元素可见时隐藏非视图元素。如果还有其他解决方案，我会在这里了解它。解决方案：只需在离屏幕足够远的元素中添加一个id，以避免同时显示多个元素。

<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>