.hide and .show display all elements and not work properly until the user scrolls

Question

Hi, so I'm working on a vertical scroll site where the fixed center image (the main character) is hidden and displayed depending on where the user is on the page using .scrolltop. The only problem I am facing is that when the page is loaded for the first time, each center image is loaded immediately and displayed. Once you start scrolling, it works right from the point, it seems to happen only on the first page load. What am I writing incorrectly in my script? I think this is because the .hide function is not activated until the user scrolls, but I don’t know how to write it differently.

Thank.

Here is a website so you can see what I'm talking about:

http://pixel.csueastbay.edu/3870/corzine/project1/index.html

And here is a js example:

<script>

$(window).scroll(function() {
if ($(this).scrollTop() > 290) {
    $(".fallingman").hide();
}

if ($(this).scrollTop() < 290) {
    $(".fallingman").show();
}

});




$(window).scroll(function() {

if ($(this).scrollTop() < 290) {
    $(".fallingman2").hide();
}

if ($(this).scrollTop() > 290) {
    $(".fallingman2").show();
}
if ($(this).scrollTop() > 1200) {
    $(".fallingman2").hide();
}

});

</script>

Answer 1

, . , .

function checkScroll() {
    var pos = $(window).scrollTop();
    if (pos > 290) {
        $(".fallingman").hide();
        $(".fallingman2").show();
    }
    if (pos < 290) {
        $(".fallingman").show();
        $(".fallingman2").hide();
    }
    if (pos > 1200) {
        $(".fallingman2").show();
    }
)

$(function() {
    checkScroll();
    $(window).scroll(checkScroll);
});