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
*/
@ricardogaynorgaynor
Copy link

yes

@ricardogaynorgaynor
Copy link

sir

@stevenfokoua
Copy link

stevenfokoua commented Aug 10, 2016

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

Copy link

ghost commented Sep 19, 2016

thanks

@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