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回调可以解决问题，但你应该使用1.8版本的JQuery。

$(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

您可以将元素的绝对定位更改为position: relative。您可以获得与position: absolute相同的行为，但显然，它相对于它的父元素定位。看看这个小提琴http://jsfiddle.net/FV2sp/1/

否则您的另一个选择是将绝对定位的元素放在.content元素中。然后它将随着.content元素上下滑动而移动。

Answer 3

您可以使用该jquery，以便您的div跟随滚动

$(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
        });
    }
});

}）;

将其放在页面底部或某处。

使用Jquery滚动div

3 个答案: