javascript - 我需要有人来修复这个小脚本，它几乎可以工作了!图像出现在 View /滚动中

Question

大家好，我在使用这个脚本时遇到了一些问题!

我的 css 中有一个不透明度设置为 0 的图像画廊，我希望这些图像在向下滚动时出现(在 View 中)在这个脚本中我已经设置它以便它们在 50% 时出现图像高度，但它们显示为 100% 我不知道为什么..

<script>    

    function isScrolledIntoView(elem, percent_image_before_appearing){
    if(typeof percent_image_before_appearing == "undefined") percent_image_before_appearing = 0;

    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    var break_point = elemTop + (percent_image_before_appearing/100) * $(elem).width();
    return ((elemBottom <= docViewBottom) && ( (break_point) >= docViewTop));
}
    function changeOpacity(){
    $("img").each(function(){
    var img = $(this);

        if (isScrolledIntoView(this,50)){
            img.css("opacity","1.0");
        }
    });
}

$(function(){

    changeOpacity();
    $(window).scroll(changeOpacity);
});

</script>     

Answer 1

有没有理由

 var break_point = elemTop + (percent_image_before_appearing/100) * $(elem).width();

使用 .width() 而不是 .height()？

更重要的是，你有

elemBottom <= docViewBottom

这是在问，元素底部是否小于 docViewBottom。换句话说，就是图像的底部高于窗口的底部。换句话说，它是否完全在视野中。

我怀疑你真的想要

break_point <= docViewBottom

检查断点(50% 点)是否可见。