E. Shio E. Shio - 2 months ago 4x
Javascript Question

How can I integrate the code from this pen onto my site?

I created this pen with identical code from my wordpress website, however it does not work on my actual website. I have cleared the sites cache and turned it off, I have also tried using wp_enqueue_script, but failed (likely user error). How can I get this to work on my site? Everything in this pen works on the site except the js. Help! :(


<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>


.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;


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

[link] (https://codepen.io/ericshio/pen/zBRbAY)


This is what actually worked for me with the help from Toby. His answer did not work, but it lead me in the right direction.

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