滚动时执行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
        });
    }    
});

Answer 2

试试这个：

var hasScrolledPast = false;
window.onscroll = function() {
    if (window.scrollTop > whereYouWantToScrollDownTo && !hasScrolledPast) {
        hasScrolledPast = true;
        // do your code here.
    }
};

Answer 3

<script>

    $(window).on('scroll', function() {
        var y_scroll_pos = window.pageYOffset;
        var scroll_pos_test = 1800;             // set to whatever you want it to be

        if(y_scroll_pos > scroll_pos_test) {
    //do stuff
            $(function(){
                $("#typed").typed({
                    strings: ["Zainteresowany?"],
                    typeSpeed: 20
                });


            });
            setTimeout(function() {
                $(function(){
                    $("#typed2").typed({
                    strings: ["Skontaktuj się z nami!"],
                    typeSpeed: 20
                });})}, 4000);
        }
    });
</script>

这解决了等待另一个函数执行的问题，但现在又出现了另一个问题。