CODEWITHSUNDEEP
javascriptjquery
Roi
Roi

Reputation: 27

change div height when scrolling down

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

Upvotes: 0

Views: 174

Answers (1)

Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

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.

Upvotes: 1

Related Questions