Make an item visible only when scrolling down to *** px

Question

I use the scroll up button on my website. I use this jquery for it

$(window).scroll(function() { if ($(this).scrollTop()) { $('#cttm:hidden').stop(true, true).fadeIn(); } else { $('#cttm').stop(true, true).fadeOut(); } }); $(document).ready(function(){ var bottom = ($(window).outerHeight() - $(window).height()) - 150; // 150 pixel to the bottom of the page; $(window).scroll(function(){ if ($(window).scrollTop() >= bottom ) { $("#cttm").fadeTo("slow",.95); } else { $("#cttm").fadeOut("slow"); } }); $("#cttm").click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); $("#cttm").fadeOut("slow"); }); }); 

This jQuery works fine, but I want this element to only appear when scrolling up to 200 pixels from the top, or something like that. Is there a way to do this using jQuery?

Answer 1

For this you do not need the height of the window.

 var isVisible = false; $(window).scroll(function(){ var shouldBeVisible = $(window).scrollTop()>200; if (shouldBeVisible && !isVisible) { isVisible = true; $('#mybutton').show(); } else if (isVisible && !shouldBeVisible) { isVisible = false; $('#mybutton').hide(); } }); 

Demo: http://jsfiddle.net/dystroy/gXSLE/