Question

箭头图像当前位于屏幕底部，使用css。我使用

在屏幕上显示图像

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

按钮是一个白色的向下箭头，周围有一个黑色圆圈，不透明度设置为40％。我想让它拥有我的主屏幕，告知访客向下滚动。当它们向下滚动时，我希望它能够逐渐消失。我希望它在屏幕的底部，无论用户正在查看它的监视器的大小。我该怎么做？我正在运行wordpress和海狸建设者。不太熟悉jquery / javascript。

（编辑：我也制作了按钮，所以当你点击它时，它会将你带到页面上的预定位置。它链接使用：

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

）

这是我用来保持图像居中的网站和网站底部的css：

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

我从另一个页面尝试了一些jquery，但我不知道如何将它合并到网站中。我正在使用海狸建设者，我尝试去工具然后布局css / javascript并把它放在javascript下，但它没有用。当用户滚动100px后，我也不介意图像消失。

这是我使用的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;
    }
}
});

当用户向我的网页滚动100px时，淡出图像（向下箭头）

1 个答案: