Fade an image out (down-arrow) when a user scrolls 100px or so down my webpage

Question

The arrow image currently sits at the bottom of the screen using css. The I have the image on the screen using

<img class="down-arrow" src="pathtoimg"/>

The button is a down arrow in white with a black circle around it with the opacity set to 40%. I would like to have it own my homescreen to inform visitors to scroll down. When they scroll down I would like for it to fade away. I want it on the bottom of the screen no matter the size of monitor a user is viewing it on. How should I do this? I am running wordpress and beaver builder. Not really familiar with jquery/javascript.

(Edit: I also have made the button so when you click on it, it brings you down to a pre-determined place on the page. It links using:

<a href="locationtojumpto"><img "codestuffhere"/></a>

)

Here is the css I used to keep the image centered and at the bottom of my site:

.down-arrow { 
    position: fixed;
    bottom: 1%;
    left: 50%; }

and I tried some jquery from another page, but I do not know how to incorporate it into the site. I am using beaver builder and I tried going to tools then layout css/ javascript and put it in there under javascript, but it did not work. I also wouldn't mind the image fading when it disappears after the user scrolls 100px.

This is the jQuery I used but I honestly do not know hot it works or how to use it or where to put it or anything.

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

I put it in beaver builder tools under javascript but I do not think it goes there and also have no idea how to get it to run on the image. I am an extreme beginner here, cut me some slack. :(

Answer 1

I've created this pen as an example. Enjoy.

http://codepen.io/StevenVentimiglia/pen/PzQPxV

HTML

<div id="mainContainer">
    <button class="btn">This is a button.</button>
</div>

CSS

body {
    background: #999;
}

#mainContainer {
    position: relative;
    text-align: center;
    height: 2400px;
    background: #eee;
}
#mainContainer button.btn {
    width: 200px;
    height: 40px;
    position: fixed;
    top: 40px;
    left: 50%;
    color: #333;
    font-size: 16px;
    margin-left: -100px;
}

JS

// Scroll Control
$(window).scroll(function() {
if ($(document).scrollTop() > 400) {
    $('.btn').hide();
} else {
    $('.btn').show();
}
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') || location.hostname === this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
    }
}
});