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
*/

sir

Great job
Works fine when i scroll to the bottom
But i'm rather trying to fade out at the top, and i'm new in Js/Jquerry,
Any help will be great
EDIT: I was able to modify so as for the button to fade in when scrolling down just by changing :
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
to
var op = $(window).scrollTop() / threshold;
But the new problem is that it is visible, unless you scroll down then up, whereas i want it to be invisible until you scroll

thanks

thanks! very usefull!

Very good !

Tysm

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