Overlay div - прокручивать как можно больше контента

Question

Я работаю над этим сайтом: http://www.massobservation.org. Если вы нажмете «Информация», в верхней части содержимого будет отображаться div, наложение, если хотите. Тем не менее, я бы хотел, чтобы сайт, когда оверлей активен, можно было прокручивать только до содержимого оверлея div. Тем не менее, вы можете видеть, что, несмотря на то, что наложение заканчивается (желтый фон заканчивается), сайт все равно прокручивается вниз.

Пример этого приведен здесь: http://cargocollective.com/montessori

Есть идеи? Большое спасибо заранее.

Answer 1

Пока оверлей не является дочерним элементом #top, это должно работать:

Когда откроется оверлей, добавьте этот стиль в ваш основной контент:

#top {
    position: fixed;
}

Когда наложение закрывается, удалите стиль.

Answer 2

При отображении наложения вы можете сделать что-то вроде:

a) Отключить прокрутку для основного документа - $(document).css('overflow', 'hidden');

b) Установить высоту наложения на высоту окна - $(overlay).css('height', $(window).height()+'px');

c) Установить переполнение: авто для наложения - $(overlay).css('overflow', 'auto');

Это должно гарантировать, что прокрутка работает только до конца содержимого в наложении.

Answer 3

Что вы можете попробовать:

• Когда оверлей видим, установите overflow: hidden;на основной контент.Я пробовал это в div .work-section.
• Убедитесь, что оверлейный контент НЕ является дочерним по отношению к основному контенту.Прямо сейчас это дочерний элемент div .work-section, переместите его наружу.

Это должно означать, что только оверлейный контент вызывает прокрутку браузера.