向下滚动时更改div高度

Question

I have div element that contain google map. The div is on the half of the page, and it's start from the middle (more or less).

Is it possible that the height of it will be expand when user scroll down ( and shrink when scroll up) ?

I have some script that do it, but it's not so friendly.

and the current script is:

// 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

Try this here:

$(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");
    }
});

Until the scroll reaches 570, the map will always stay like in the beginning. After that it will smoothly follow the scroll.