I have a fixed-position article element that I would like to fade out when scrolling the page. I'm not very experienced in Javascript, but after some research I have put together this script;
<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/ ).
Any ideas why? Thanks in advance.
You may need to specify the height of the body if you are using var height = $('body').height();
. However, make the following change and it should work:
$('#instructions').css('opacity', opacity);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.