Изменить высоту div при прокрутке вниз

У меня есть элемент div, содержащий карту Google. 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"); ;
    }
});

Что вы имеете в виду под «не очень дружелюбным сценарием»? Не могли бы вы подробнее рассказать об этом? Функция .scroll, указанная в вашем примере, была бы лучшим способом реализовать это, так что ваша проблема с изменением размера вашего div?

— 17.04.2018 10:44

@Sirence - ну, по ссылке, которую я прикрепил выше, вы можете видеть, что при прокрутке вниз размер карты изменяется как прыжок.

— 17.04.2018 11:24

@roi вы пробовали мой код ниже? это работает как шарм для меня. Карта больше не прыгает. Если да, то буду признателен, если вы отметите мой ответ как правильный :)

— 17.04.2018 13:11

javascript jquery

17.04.2018 10:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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, карта всегда будет оставаться такой же, как и в начале. После этого он будет плавно следовать за прокруткой.

Идеально! благодарю вас! Вы можете словами объяснить, что вы сделали?

— 17.04.2018 16:30

17.04.2018 11:04