After implementing this code, I was able to achieve a fade-in effect while scrolling:
<script language="JavaScript">
$(document).ready(function() {
$(window).scroll( function() {
$('#floatingDIV4').each( function() {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
</script>
I've been searching for a solution to make the element fade out when it reaches the top position after appearing during scroll, but haven't found any suitable code yet. Any suggestions?
Edit:
The responses provided were helpful, but unfortunately, none of the suggested codes worked as expected.