JS to fade fixed header when you scroll to footer (used on OnSago.com)


<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
var threshold = 200; // number of pixels before bottom of page that you want to start fading
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
if( op <= 0 ){
$(".jgoog").hide();
} else {
$(".jgoog").show();
}
$(".jgoog").css("opacity", op );
});
</script>

Replace ".jgoog" with your CSS class or ID name.


Code below is for stopping JS on screens smaller than 720px

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script type="text/javascript">
$(window).scroll(function(){
  var threshold = 200; // number of pixels before bottom of page that you want to start fading
  var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
  if(screen.width < 720) { 
    // do any 720 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}
	if( op <= 0 ){
		$(".jgoog").hide();
	} else {
		$(".jgoog").show();
	}
	$(".jgoog").css("opacity", op ); 
});
    </script>

Did you find this article useful?