How do I make image disappear when my scrollable div has reached a certain height?

Question

I have a scrollable div with and arrow above and an arrow below. What I am trying to do is to make the arrow above appear after the div has reached a certain height.

here is the code that I have...

$("#scrolldivup").hide();
$(.section).scroll(function(){
          if($(.section).scrollTop()>1){
                $("#scrolldivup").fadeIn();
             }
             else
             {
                $("#scrolldivup").fadeOut();
             }
    });

".section" is the scrollable div So as soon as it scrolls more than 1 pixel I want the "#scrolldivup" to appear which by the way is an anchor tag.

Can anyone see how my code is wrong?

jquery lazy loader : http://stackoverflow.com/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view — diEcho, Jun 11 '13 at 08:44

score 1 · Accepted Answer · answered Jun 11 '13 at 08:45

1

Try this

$("#testdiv").hide();
 $(".section").scroll(function(){
      if($(".section").scrollTop()>1){
            $("#scrolldivup").fadeIn();
         }
         else
         {
            $("#scrolldivup").fadeOut();
         }
 });

answered Jun 11 '13 at 08:45

Amit

14,671
8
41
63

score 1 · Answer 2 · answered Jun 11 '13 at 08:47

1

$(.section) should be $('.section')

answered Jun 11 '13 at 08:47

TheGwa

1,909
26
43

How do I make image disappear when my scrollable div has reached a certain height?

2 Answers2