Javascript Optimization

Question

私はこの方法を理解できないようです。JSは動作しません。 scrollfunctionは機能しますが、非表示にはなりません。また、コードの行数を減らしてこれを行う方法はありますか？ .down-arrow〜fade outを50pxの後に入力し、50pxの後に非表示にするとクリックできません。私のサイトとコードペンで作業していましたが、その後は無作為に動作しなくなりました。コードは明らかに間違っている、何とかそれは...働い

JSた：

$(window).scroll(function() { 
    $(".down-arrow").css("opacity", 1 - 
    $(window).scrollTop()/50); 
}); 

$(window).scroll(function() { 
    $(".down-arrow").hide(fast); 
    $(window).scrollTop() > 50); 
}); 

[編集]ここで

である私は明白な構文エラーや提案にアドバイスを書いた新しいJS私はとにかくやって期待していた1体、でそれをすべてを配置します

$(window).scroll(function() { 
    $(".down-arrow").hide("fast"); 
    $(".down-arrow").css("opacity", 1 - 
     $(window).scrollTop()/50); 
}); 

しかし、今、私は使用はは50pxマークの上に、トップまで戻ったときに矢印が表示したいです。

Answer 1

さんのまず最初の、funcitionを登録する必要はありません二回

var element = $(".down-arrow"); 
$(window).scroll(function() { 
    if($(window).scrollTop() > 50){ 
    element.css("opacity","0"); 
    if(!element.hasClass("hidden")){ 
    element.addClass("hidden"); 
    } 
    }else{ 
    $('.down-arrow').removeClass("hidden") // if there is nothing, nothing to remove 
    $(".down-arrow").css("opacity", 1 -$(window).scrollTop()/50); 
    } 
}); 

いくつかのCSSの変更：

.down-arrow.hidden{ 
    display:none; 
} 
.down-arrow:hover { 
    //you have to overwrite inline opacity , which js makes.. 
    opacity: 1 !important; 
} 

期待通りに動作するはずですさて、ので、多分:)