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/bennars/FV2sp/

4

3 に答える 3

2

とにかく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を参照してください。

于 2013-05-04T00:59:01.703 に答える
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 に答える