CODEWITHSUNDEEP
javascripthtmlcsswordpress
ERIC
ERIC

Reputation: 63

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! :(

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

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

Upvotes: 0

Views: 64

Answers (2)

ERIC
ERIC

Reputation: 63

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

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

Upvotes: 0

Toby
Toby

Reputation: 13385

Are you wrapping the function? Try wrapping it like so:

$(document).ready(function() {

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

});

Upvotes: 3

Related Questions