[英]Fade an image out (down-arrow) when a user scrolls 100px or so down my webpage
The arrow image currently sits at the bottom of the screen using css. 当前,使用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%. 该按钮是白色的向下箭头,周围带有黑色圆圈,不透明度设置为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. 我正在运行wordpress和beaver构建器。 Not really familiar with jquery/javascript. 不太熟悉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: 这是我用来保持图片居中并位于网站底部的CSS:
.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. 我尝试了另一页上的jquery,但我不知道如何将其合并到网站中。 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. 我正在使用海狸生成器,并且尝试过使用工具,然后布局css / javascript,并将其放在javascript下,但是没有用。 I also wouldn't mind the image fading when it disappears after the user scrolls 100px. 当用户滚动100像素后图像消失时,我也不会介意。
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. 这是我使用的jQuery,但老实说,我不知道它的功能或使用方法,放置位置或其他任何内容。
$(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. 我把它放在javascript下的beaver构建器工具中,但我不认为它在那里,也不知道如何使它在图像上运行。 I am an extreme beginner here, cut me some slack. 我是一个极端的初学者,请放松一下。 :( :(
I've created this pen as an example. 我以这支笔为例。 Enjoy. 请享用。
http://codepen.io/StevenVentimiglia/pen/PzQPxV http://codepen.io/StevenVentimiglia/pen/PzQPxV
HTML 的HTML
<div id="mainContainer">
<button class="btn">This is a button.</button>
</div>
CSS 的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 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;
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.