Question

I have got a bit of Javascript here which makes a div appear at a certain height on the page however I want to make it disappear again at another height so it displays between a range of pixels. E.g I want the div to appear at a height of 500 and disappear again at 700.

Here is the following code I have:

<script type="text/javascript">
    $(document).ready(function(){
        $("#testdiv").hide();
        $(window).scroll(function(){
              if($(window).scrollTop()>500){
                 $("#testdiv").fadeIn();
              }else{
                 $("#testdiv").fadeOut();
              }
        });
    });
</script>

Would appreciate the help,
Ryan.

Answer 1

Does this work? I added an additional check to see if the scrollTop is higher than 700. If so, hide the #testdiv

<script type="text/javascript">
    $(document).ready(function(){
        $("#testdiv").hide();
        $(window).scroll(function(){
              if($(window).scrollTop()>500){
                 if($(window).scrollTop()>700){
                    $("#testdiv").fadeOut();
                 }
                 else
                 {
                    $("#testdiv").fadeIn();
                 }
              }
        });
    });
</script>