Как я могу добавить div in / out при прокрутке страницы?

Question

Вот jsfiddle: http://jsfiddle.net/NKgG9/

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

Вся помощь приветствуется.

Answer 1

Очень простой пример: http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​

Answer 2

Как это?http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

Основная идея: подписаться на событие прокрутки.Если позиция прокрутки перемещается после определенной точки, начните постепенное исчезновение и аналогично, если пользователь прокручивает вверх постепенное увеличение. Некоторые важные детали: отследите, если вы уже исчезаете в / из (показанная переменная) и остановите любое продолжающееся исчезновение, еслиначать новое увядание.

Answer 3

Спасибо - этот действительно помог мне.

Изначально я хотел найти решение, подобное « Scroll for More », и мне удалось сделать это с http://jsfiddle.net/a4FM9/12/ - возможно, это пригодится любому.