javascript - 滚动时执行 typed.js

Question

我是初学者 - 只是说。

我正在尝试在线提供的不同 .js 文件，我发现了 typed.js。

但是，如果我有自己的网站并且想在滚动到页面的某个元素时执行键入的代码怎么办？

我明白了:

<script type="text/javascript" src="js/typed.js"></script>
<script>
    $(function(){
                    $("#typed").typed({
                        strings: ["Are you somehow interested?"],
                        typeSpeed: 30
                    });
                });
</script>

在我的 HTML 文件的末尾。

当我到达特定的 div 或 h1 或其他内容时如何运行此代码？

是否有任何在线资源可供我学习如何操作？

谢谢!

Answer 1

首先有一个方法可以检查用户是否滚动到一个 div，如下所示:

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) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

然后添加事件监听器到窗口滚动如下:

$(window).scroll(function() {    
    if(isScrolledIntoView($('#theTarget')))
    {
        //the div is now visible to user. here add your script
        $("#typed").typed({
                strings: ["Somehow interested?"],
                typeSpeed: 20
        });
    }    
});