滚动时执行typed.js

Question

I'm a beginner - just saying.

I'm trying out different .js files available online and I found typed.js.

But what if I have my own website and want to execute typed code when I scroll to a certain element of the page?

I got this:

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

in the end of my HTML file.

How to run this code when I reach the specific div or h1 or whatever?

Is there any online source where I can learn how to do it?

Thanks!

Answer 1

First of all have a method which will check if the user is scrolled to a div as following:

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));
}

Then add event listener to window scroll as following:

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

Try this:

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>

This solved the problem of waiting for another function to execute, but now there is another problem.