javascript - 向下滚动时更改 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， map 将始终保持在开始时的状态。之后它将顺利地跟随滚动。