0

I have managed to hide the element when you scroll all the way up but i am having problems to hide it when you scroll down to bottom of the page.I have two span elements that hold images of uparrow.png and downarrow.png.I want my downarrow span to disappear when you reach the bottom of the page and else it is visible.Here is my code:

#uparrow{position:fixed;top:20px;left:50px;}
#downarrow{position:fixed;bottom:20px;left:50px}

$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();

if(st==top){
$("#uparrow").css("display","none");
}else{
$("#uparrow").css("display","block");
}
});

});
admir
  • 193
  • 16
  • You can probably figure it out if you use the answer to [this question](http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom) – ioums Sep 12 '14 at 17:22
  • thanks i used one of the answers from that topic – admir Sep 12 '14 at 21:38

2 Answers2

0

ok i figured it out here is the code:

$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();
if(st==top){
$("#uparrow").css("display","none");
}else{
$("#uparrow").css("display","block");
}
if($(window).scrollTop() + window.innerHeight == $(document).height()){
 $("#downarrow").css("display","none");
 }else{
 $("#downarrow").css("display","block");
 }
});
});

It's the window.innerHeight that does the work because if i put ($(window).scrollTop() == $(document).height() - $(window).height()) that makes arrows disappear when you scroll all the way up at least that's what i am getting in my browsers(firefox 32.0,chrome 37.0.2062.120)

admir
  • 193
  • 16
-1
$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();

if(st==top){
$("#uparrow").css("display","none");
}else if{
$("#uparrow").css("display","block");
}
else if ($(window).scrollTop() == $(document).height() - $(window).height()){
    // your piece of code e.g.    
    $("#downarrow").css("display","none");
   }    
else
{}
}); 
});
Sachin Gadagi
  • 749
  • 5
  • 14
  • i have forgotten to mention that i have two functions for scrolling up and down when you click the arrows here they are function sc(){ window.scrollBy(0,window.innerHeight); } function scu(){ window.scrollBy(0,-window.innerHeight); } and now when i combine your code with mine everything freezes and it doesn't want to scroll onclick – admir Sep 12 '14 at 17:36
  • if i use if ($(window).scrollTop() == $(document).height() - $(window).height()){alert("bottom");} i get alert when i scroll all the way up instead of down.. – admir Sep 12 '14 at 21:31