Skip to content

Instantly share code, notes, and snippets.

@namklabs
Last active October 15, 2023 12:50
Show Gist options
  • Save namklabs/4675438 to your computer and use it in GitHub Desktop.
Save namklabs/4675438 to your computer and use it in GitHub Desktop.
fade out and hide a fixed element when you scroll to the bottom of the page (jQuery)
//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
*/
@heyzombie
Copy link

thanks! very usefull!

@caioaugustodev
Copy link

Very good !

Tysm

@ta-diegov
Copy link

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?

@Hnnx
Copy link

Hnnx commented Feb 13, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment