How To Make A Div Appear And Disappear Between 2 Heights?

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 ra

Solution 1:

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

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

Solution 2:

I would look into the jQuery waypoints plugin here:

http://imakewebthings.github.com/jquery-waypoints/

It will get you the desired result without needing to hardcode 500 or 700. You can define 'markers' in your html that will trigger events when you scroll to them. Set one marker at 500 and another at 700 and you should be good to go.