Прокрутите div с помощью JQuery

Question

У меня есть функция щелчка, которая перемещает форму контакта вниз с верхней части страницы и выталкивает остальную часть страницы вниз. У меня есть абсолютная позиция DIV, которая остается там, где она есть сейчас, и мне нужно, чтобы она прокручивалась вниз, как будто она не имела абсолютной позиции.

$("#contact-tab").toggle(function() { 
    $('#contact-form-wrapper').slideToggle(); 
     // scroll #absolute DIV vertically the height of #contact-form-wrapper 
    }, function() { 
     $('#contact-form-wrapper').slideToggle(); 
     // scroll #absolute back to where it was 
    }); 

#absolute { 
    position: absolute; 
    top: 500px; 
} 
#contact-form-wrapper { 
    width:100%; 
    height:370px; 
    top:0; 
} 

Пример: http://jsfiddle.net/benners/FV2sp/

Answer 1

Рассмотрите возможность изменения метода позиции, в любом случае с помощью progress callback может решить проблему, но вы должны использовать версию 1.8+ JQuery. KG

$(document).ready(function() { 
    $('#contact-form').hide(); 

    $("#contact-us").toggle(function() { 
     $('#contact-form').slideToggle({ 
      progress:function(anime,progr,remain){ 
       $("#absolute").css('top',($(this).height() + 150)); 
      } 
     }); 
    }, function() { 
     $('#contact-form').slideToggle({ 
      progress:function(anime,progr,remain){ 
       $("#absolute").css('top',($(this).height() + 150)); 
      } 
     }); 
    }); 

}); 

см. Обновленный jsFiddle.

Answer 2

Вы можете использовать это JQuery, чтобы ваш ДИВ следовать свиток

$(function() { 

var $mydiv = $(".id-of-your-div"), 
$window = $(window), 
offset  = $mydiv.offset(), 
topPadding = 15; 

$window.scroll(function() { 
    if ($window.scrollTop() > offset.top) { 
     $mydiv.stop().animate({ 
      marginTop: $window.scrollTop() - offset.top + topPadding 
     }); 
    } else { 
     $mydiv.stop().animate({ 
      marginTop: 0 
     }); 
    } 
}); 

});

Поместите его в нижней части страницы или где-нибудь еще.

Answer 3

Вы можете изменить абсолютное позиционирование элемента на position: relative. Вы можете получить то же поведение, что и position: absolute, за исключением того, что, очевидно, оно расположено относительно его родительского элемента. Посмотрите эту скрипку http://jsfiddle.net/FV2sp/1/

В противном случае вы можете разместить абсолютно позиционированный элемент внутри вашего элемента .content. Затем он будет перемещаться по мере продвижения вашего элемента .content вверх и вниз.