用Jquery滾動div

我有一個點擊功能，可以從頁面頂部向下滑動聯繫人表單，並將頁面的其餘部分向下推。我有一個絕對位置DIV，它保持在當前位置，我需要它向下滾動，就好像它沒有絕對位置。用Jquery滾動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/

來源

2013-05-03 Paul Benbow

考慮改變位置方法，無論如何使用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-04 00:59:01

謝謝。這工作完美！ – 2013-05-04 20:01:12

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

}）;

將其放置在頁面底部或某處。

來源

2013-05-03 10:52:34 Mhche

對不起，但我不知道如何將它集成到我上面包含的代碼中。你能否詳細說明一下？ – 2013-05-03 19:02:22

只需使用您在div上的id來更改.id-of-div。然後將其放置在頁面內的某個位置。 – Mhche 2013-05-06 10:25:49

您可以將元素的絕對位置更改爲position: relative。您可以獲得與position: absolute相同的行爲，但明顯地，它相對於其父元素進行定位。看看這個小提琴http://jsfiddle.net/FV2sp/1/

否則您的其他選擇是將絕對定位的元素放置在您的.content元素內。然後它會隨着你的.content元素上下滑動而移動。

來源

2013-05-03 11:16:35 antony

沒有做我真正想要的東西。我已經添加了小提琴，以顯示我的工作。我希望#absolute以＃contact-form滾動 – 2013-05-03 19:28:25

嗯好的。絕對定位是一個問題。你有沒有考慮改變它的定位到相對？這可能不是你所需要的，因爲你在問題中指定了絕對位置，但是我已經提供了一個例子，表示我的意思是http://jsfiddle.net/FV2sp/1/，以防萬一它適合你。讓我知道你的想法。 – antony 2013-05-04 00:29:28

我還沒有完全清楚如何使用絕對和相對定位，直到我嘗試了你的建議並做了更多的閱讀。這是我用過的解決方案，雖然它不是我的問題的確切答案。感謝您的幫助！ – 2013-05-04 19:59:49

用Jquery滾動div

回答

相關問題