Сдвиньте div с jQuery на событие прокрутки

Question

Я использую jQuery, чтобы исчезнуть в «слайде» в нижней части моей страницы, это небольшая вкладка, которая должна придерживаться правой стороны. В настоящее время я угасаю его на задержке, но я бы хотел, чтобы он исчезал, когда пользователь прокручивается вниз.

Это, однако, продолжает раздвигать div по странице, вместо того чтобы оставлять его в стороне.

$(function() { 
     var slide = $("div[data-slide='true']"); 

     $(window).scroll(function() { 
      var pos = $(document).scrollTop(); 
      console.log(pos); 
      if ($(document).scrollTop() > 400) { 
       slide.animate({opacity: 1,right:'+=350'},1350, 'swing').stop(); 

      } else { 
       slide.clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce'); 
      } 
     }); 

    }); 

Как остановить скольжение после достижения начальной точки маршрута? Кажется, я могу отвязать событие прокрутки с $(window).unbind('scroll');, но затем слайд никогда не оживляет.

Answer 1

Вы начинаете новую анимацию до + 350px каждый раз при запуске события прокрутки, поэтому оно перемещается по странице.
Я сделал небольшой тест, чтобы предотвратить это. Я в основном добавить два ВАРА (открытие и закрытие), чтобы предотвратить анимацию запуска несколько раз, и изменил самой анимацию немного:

Демы:
http://jsfiddle.net/B7pJL/1/

JS:

var slide = $("div[data-slide='true']"); 
var opening = false; 
var closing = false; 
$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    console.log(pos); 
    if (pos > 100) { 
     if (!opening) { 
      opening = true; closing = false; 
      slide.stop().animate({ 
       opacity: 1, 
       'margin-left': -350 
      }, 1350, function() { 
       opening = false; 
      }); 
     } 

    } else { 
     if (!closing) { 
      closing = true; opening = false; 
      slide.stop().animate({ 
       opacity: 0, 
       'margin-left': 0 
      }, 500, function() { 
       closing = false; 
      }); 
     } 
    } 
});​