このペンのコードを自分のサイトに統合するにはどうしたらいいですか？

Question

私のワードプレスのウェブサイトと同じコードでこのペンを作成しましたが、実際のウェブサイトでは動作しません。私はサイトのキャッシュをクリアし、それをオフにした、私もwp_enqueue_scriptを使用してみましたが、失敗した（おそらくユーザーエラー）。これを私のサイトで動作させるにはどうすればいいですか？このペンの中のすべては、jsを除くサイト上で動作します。助けて！ :(

HTML：

<a href="#introjump"><img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/></a> 

CSS：

.down-arrow { 
    position: fixed; 
    bottom: 1%; 
    left: 50%; 
    max-width: 3.5%; 
    min-width: 3.5%; 
    width: 3.5%; 
    box-shadow: none; 
    opacity: 0.6; 
} 
.down-arrow:hover { 
    opacity: 1; 
} 

.filler { 
    height: 10000px; 
} 

Javascriptを：？

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

[リンク]（https://codepen.io/ericshio/pen/zBRbAY）

Answer 1

これは実際にTobyの助けを借りて私のために働いたものです。彼の答えはうまくいきませんでしたが、正しい方向に私を導きます。

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

Answer 2

あなたが機能をラップして試してみてくださいそれを包むso：

$(document).ready(function() { 

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

});