Fade ein Bild aus (Pfeil nach unten), wenn ein Benutzer 100px oder so auf meiner Webseite scrollt

Question

Das Pfeilbild befindet sich derzeit am unteren Rand des Bildschirms mit CSS. Die Ich habe das Bild auf dem Bildschirm

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

mit der Taste ist ein Pfeil nach unten in weiß mit einem schwarzen Kreis um ihn herum mit der Undurchsichtigkeit auf 40% festgelegt. Ich hätte gerne meinen Homescreen, um die Besucher zu informieren, dass sie runterscrollen können. Wenn sie nach unten scrollen, möchte ich, dass sie verblassen. Ich möchte es am unteren Rand des Bildschirms, unabhängig von der Größe des Monitors, auf dem ein Benutzer es anzeigt. Wie soll ich das machen? Ich betreibe WordPress und Biber Builder. Nicht wirklich vertraut mit jquery/javascript.

(Edit: Ich habe auch die Taste so gemacht, wenn Sie darauf klicken, es Sie auf einen auf der Seite vorbestimmten Ort bringt Sie verbindet mit:.

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

)

hier ist die CSS-I verwendet, um das Bild zu halten zentriert und am unteren Rande meiner Seite:

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

und ich versuchte, etwas jquery von einer anderen Seite, aber ich weiß nicht, wie es in die Website zu integrieren. Ich benutze Biber-Builder und ich habe versucht, zu Tools dann Layout CSS/Javascript und steckte es dort unter Javascript, aber es hat nicht funktioniert. Ich würde auch nichts dagegen haben, dass das Bild verblasst, wenn es verschwindet, nachdem der Benutzer 100px scrollt.

Dies ist die jQuery, die ich verwendet habe, aber ich weiß ehrlich nicht, heiß es funktioniert oder wie man es benutzt oder wo man es oder irgendetwas.

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

Ich habe es in Biber Builder-Tools unter javascript, aber ich glaube nicht, es geht dort und habe auch keine Ahnung, wie es auf dem Bild zu laufen zu bekommen. Ich bin ein extremer Anfänger hier, schneide mir ein bisschen nach. Genießen :(

Answer 1

Ich habe diesen Stift als Beispiel erstellt..

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