![](/img/trans.png)
[英]jquery - How to fade in and fading out back an element (div) as we scroll
[英]Trouble fading element on scroll
我有一个固定位置的article元素,我想在滚动页面时淡出。 我对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>
这似乎不起作用,并且在进行拼写时该元素仍处于完全不透明的状态(该网站位于http://edharrisondesign.com/pocketpictograms/ )。
有什么想法吗? 提前致谢。
如果使用var height = $('body').height();
;,则可能需要指定var height = $('body').height();
。 但是,进行以下更改,它应该起作用:
$('#instructions').css('opacity', opacity);
演示: http : //jsfiddle.net/SLGdE/20/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.