Как заставить div появляться и исчезать между двумя высотами?

Question

У меня здесь есть немного Javascript, который заставляет div появляться на определенной высоте на странице, однако я хочу, чтобы он снова исчезал на другой высоте, чтобы он отображался в диапазоне пикселей. Например, я хочу, чтобы div появлялся на высоте 500 и снова исчезал на 700.

Вот следующий код, который у меня есть:

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

Буду признателен за помощь, Райан.

Answer 1

Это работает? Я добавил дополнительную проверку, чтобы убедиться, что scrollTop больше 700. Если это так, скройте #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>

Answer 2

Я бы посмотрел плагин jQuery waypoints здесь:

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

Это даст вам желаемый результат без необходимости жестко кодировать 500 или 700. Вы можете определить «маркеры» в вашем html, которые будут вызывать события, когда вы переходите к ним. Установите один маркер на 500, а другой на 700, и все будет хорошо.