0

我有一个点击功能，可以从页面顶部向下滑动联系表格并将页面的其余部分向下推。我有一个绝对位置 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/

4

3 回答 3

2

考虑更改位置方法，无论如何使用progress回调可以解决问题，但您应该使用 JQuery 1.8+ 版本。

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

于 2013-05-04T00:59:01.703 回答
1

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

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

于 2013-05-03T11:16:35.637 回答
0

您可以使用该 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
        });
    }
});

});

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

于 2013-05-03T10:52:34.743 回答