jquery - 当包含到达窗口中心的对象时放大对象 - jquery？

Question

我正在发布小提琴。 http://jsfiddle.net/HWzz3/3/ 就是这种情况。当涉及到窗口的垂直中心时，我想缩放或缩放容器。当它不在该位置或滚动出该位置时返回其原始位置。用jquery可以吗？

<div id="container">My content</div>

我会尝试在到达中心时放大并在远离中心时缩小。任何想法或帮助？

太感谢了。

Answer 1

jsFiddle 演示

var contPos = $('#container').position().top;
var conthH = $('#container').height()/2;

$(window).on('scroll resize', function(){
    var scr = $(this).scrollTop(),
        winH = $(this).height()/2,
        curr = Math.abs((scr+winH)-(contPos+conthH)),  
        size = (curr<150)  ?  500:200   ;
    $('#container').stop(1).animate({width:size, height:size, marginTop:-size/2},300);   
});

您会看到size = (curr<150) ? 500:200 ;
150px 中的“屏幕中心区域”来做某事（您可以根据需要使用该值）
白色500，并且200是您要应用的MAX和MIN尺寸。