Cant get my Javascript to run properly on local machine?

Question

I am using some Javascript that is suppose to appear a certain id when you scroll to a certain point, it works and appears but when you scroll back up it doesn't stay rather it disappears.

Here is the Jsfiddle where it works - http://jsfiddle.net/rkerswell/jrpof73y/1/

And where it doesn't? - http://jsfiddle.net/rkerswell/t18m2tds/

Before you ask, I have copied the working code across above but that doesn't work. So if there is way to get it working using the second Jsfiddle then it should work. Any ideas?

This is also the Javascript as it is in my JS file.

$(function(){

    var startY = 300;

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

    function checkY(){
        if( $(window).scrollTop() > startY ){
            $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
        }
        else{
            $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideUp();
        }
    }

    checkY();

});

It is just when it scrolls back up that I am having the problem. Anything im missing?

Answer 1

My assumption here is that you want the animation to remain after scrolling up. To do that, let's take a look at your code.

$(function(){

//  Define the height the loading bar should appear at
var startY = 300;

//  Run this function whenever you scroll
$(window).scroll(function(){
    checkY();
});

//  The function ran when scrolling
function checkY(){
    //  If the window position is greater than the preset height
    if( $(window).scrollTop() > startY ){
        //  Make all of these ids slide down
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
    //  If the window position isn't greater
    } else {
        //  Make all of these ids slide back up
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideUp();
    }
}

//  Run this function again?
//  Not really needed with the scroll function
checkY();

});

tl;dr As you can see, the else statement in that function removes your loading icon if your if statement isn't true. So, if you want it to stay and only appear once, all you have to do is remove the else in the if statement.

Was that what you wanted to know?

//  Try this in place of your original checkY function
function checkY(){
    if( $(window).scrollTop() > startY ){
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
    }
}