Javascript 向下滚动时更改div高度

我有包含谷歌地图的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"); ;
    }
});

在这里试试这个：

$(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，地图将始终保持与开始时一样。之后，它将平滑地跟随滚动。

您所说的“脚本不那么友好”是什么意思？你能详细说明一下吗？示例中列出的.scroll函数是实现这一点的最佳方法，因此您的问题是调整div的大小吗？@Sirence-好的，您可以在我上面附加的链接中看到，当您向下滚动地图大小时，会像跳转一样改变。@roi您尝试过下面的代码吗？它对我来说很有魅力。地图不再跳跃。如果是这样的话，如果你能把我的答案记为正确答案，我将不胜感激：）太好了！非常感谢。你能用语言解释一下你做了什么吗？