fade out and hide a fixed element when you scroll to the bottom of the page (jQuery)

hide-on-scroll.jquery.js

//requires jQuery
$(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 ){
		$("#thing-to-hide").hide();
	} else {
		$("#thing-to-hide").show();
	}
	$("#thing-to-hide").css("opacity", op ); 
});

/*
TODO:
Get working on iOS Safari. Does not fade out completely
*/

This was part of what I was looking for thanks a lot.
Wondering as well if I can try to use part of the code to check if the height of the viewport is greater than 4x show it otherwise keep it hide?

Works great. Tried some stack overflow solutions but I like this one the most