當用戶在我的網頁上向下滾動100像素左右時，淡出圖像（向下箭頭）

Question

當前，使用css，箭頭圖像位於屏幕底部。 我在屏幕上使用的圖像

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

該按鈕是白色的向下箭頭，周圍帶有黑色圓圈，不透明度設置為40％。 我想擁有自己的主屏幕來通知訪問者向下滾動。 當他們向下滾動時，我希望它消失。 無論用戶在其上觀看顯示器的大小如何，我都希望它在屏幕底部。 我應該怎么做？ 我正在運行wordpress和beaver構建器。 不太熟悉jquery / javascript。

（編輯：我也做了此按鈕，因此當您單擊它時，它會將您帶到頁面上的預定位置。它使用以下鏈接：

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

）

這是我用來保持圖片居中並位於網站底部的CSS：

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

我嘗試了另一頁上的jquery，但我不知道如何將其合並到網站中。 我正在使用海狸生成器，並且嘗試過使用工具，然后布局css / javascript，並將其放在javascript下，但是沒有用。 當用戶滾動100像素后圖像消失時，我也不會介意。

這是我使用的jQuery，但老實說，我不知道它的功能或使用方法，放置位置或其他任何內容。

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

我把它放在javascript下的beaver構建器工具中，但我不認為它在那里，也不知道如何使它在圖像上運行。 我是一個極端的初學者，請放松一下。 :(

Answer 1

我以這支筆為例。 請享用。

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