向下滚动时更改div高度

Question

我有包含谷歌地图的div元素。 div位于页面的一半，它从中间（或多或少）开始。

当用户向下滚动时，其高度是否有可能扩大（向上滚动时，其高度会缩小）？

我有一些脚本可以做到这一点，但是它并不那么友好。

当前脚本是：

// change map size when scroll down
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 450) {
        $("#map-warp").addClass("change-map-canvas");   // removed the . from class
        $("#map-warp").css("margin-top", "40px"); ;     // change margin from top for close infoWindow button
    } else {
        $("#map-warp").removeClass("change-map-canvas");  // removed the . from class
        $("#map-warp").css("margin-top", "10px"); ;
    }
});

Answer 1

在此尝试：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var topMargin = 10 - $(window).scrollTop();

    if (scroll >= 570) {
        $("#map-warp").addClass("change-map-canvas"); 
        $("#map-warp").css("margin-top", "40px");
    } else {
        $("#map-warp").removeClass("change-map-canvas");
        $("#map-warp").css("margin-top", topMargin+"px");
    }
});

在滚动达到570之前，地图将始终像开始时一样停留。 之后，它将平稳地跟随滚动。