不能让我的Javascript在本地计算机上正常运行？

Question

我正在使用一些Javascript，当您滚动到某个点时，它会出现一个特定的id，它可以工作并出现，但是当您向上滚动时，它不会停留而是消失。

这是它起作用的Jsfiddle- http://jsfiddle.net/rkerswell/jrpof73y/1/

而在哪里呢？ -http://jsfiddle.net/rkerswell/t18m2tds/

在您问之前，我已经在上面复制了工作代码，但是那没用。 因此，如果有使用第二个Jsfiddle使其工作的方法，则它应该工作。 有任何想法吗？

这也是我的JS文件中的Javascript。

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

});

只是当它向上滚动时，我才遇到问题。 我有什么想念的吗？

Answer 1

我的假设是，您希望动画在向上滚动后保留。 为此，让我们看一下您的代码。

$(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如您所见，如果if语句不正确，则该函数中的else语句将删除加载图标。 因此，如果您希望它保留并只出现一次，那么您要做的就是删除if语句中的else 。

那是你想知道的吗？

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