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之前，地图将始终保持在开头。之后，它将顺利地跟随滚动。

向下滚动时更改div高度

1 个答案: