javascript - 当用户向下滚动我的网页 100 像素左右时淡出图像(向下箭头)

Question

箭头图像目前使用 css 位于屏幕底部。我在屏幕上使用图像

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

该按钮是一个白色的向下箭头，周围有一个黑色圆圈，不透明度设置为 40%。我想让它拥有我的主屏幕，以通知访问者向下滚动。当他们向下滚动时，我希望它消失。无论用户正在查看的显示器大小如何，我都希望它位于屏幕底部。我应该怎么做？我正在运行 wordpress 和 beaver builder。不太熟悉 jquery/javascript。

(编辑:我还制作了按钮，因此当您单击它时，它会将您带到页面上预先确定的位置。它的链接使用:

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

)

这是我用来使图像居中并位于网站底部的 css:

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

我尝试了另一个页面中的一些 jquery，但我不知道如何将它合并到站点中。我正在使用 beaver builder，我尝试使用工具然后布局 css/javascript 并将其放在 javascript 下，但它没有用。当用户滚动 100 像素后图像消失时，我也不介意图像褪色。

这是我使用的 jQuery，但老实说，我不知道它的工作原理、如何使用它、将它放在哪里或其他任何东西。

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

我把它放在 javascript 下的 beaver builder 工具中，但我不认为它在那里，也不知道如何让它在图像上运行。我是这里的极端初学者，让我放松一下。 :(

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