[英]Trouble fading element on scroll
I have a fixed-position article element that I would like to fade out when scrolling the page. 我有一个固定位置的article元素,我想在滚动页面时淡出。 I'm not very experienced in Javascript, but after some research I have put together this script;
我对Javascript不太了解,但是经过一番研究,我整理了这个脚本。
<script type="text/javascript">
//when the DOM has loaded
$(document).ready(function() {
//attach some code to the scroll event of the window object
//or whatever element(s) see http://docs.jquery.com/Selectors
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $('body').scrollTop();
var opacity = 1;
// do some math here, by placing some condition or formula
if(scrollTop > 400) {
opacity = 0.5;
}
//set the opacity of div id="someDivId"
$('#instructions').css('0', opacity);
});
});
</script>
This doesn't seem to be working, and the element remains at full opacity when scolling (the website is here http://edharrisondesign.com/pocketpictograms/ ). 这似乎不起作用,并且在进行拼写时该元素仍处于完全不透明的状态(该网站位于http://edharrisondesign.com/pocketpictograms/ )。
Any ideas why? 有什么想法吗? Thanks in advance.
提前致谢。
You may need to specify the height of the body if you are using var height = $('body').height();
如果使用
var height = $('body').height();
;,则可能需要指定var height = $('body').height();
. 。 However, make the following change and it should work:
但是,进行以下更改,它应该起作用:
$('#instructions').css('opacity', opacity);
DEMO: http://jsfiddle.net/SLGdE/20/ 演示: http : //jsfiddle.net/SLGdE/20/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.