У меня есть страница, которая выложена с использованием DIV s, и она по существу состоит из заголовка (меню), левой панели (около 20% ширины страницы), правой панели (оставшиеся 80%) и колонтитула , Высота страницы составляет примерно 2-3 высоты экрана, поэтому ее можно прокручивать. Похоже это .
Все, что у меня есть на левой панели <div>, это изображение, которое занимает около 40% высоты экрана. Мне бы хотелось, чтобы изображение в основном «скользило» вверх и вниз по экрану при прокрутке пользователем.
Меню занимает ~ 100 пикселей в высоту, поэтому изображение начинается на левой панели с ~ px 100. Как только пользователь прокручивает страницу до точки, где изображение имеет значение 0 px, я хочу, чтобы изображение оставалось фиксированным на 0 px по мере того, как пользователь прокручивает (вместо того, чтобы явно прокручивать экран, как это происходит сейчас). Нижний колонтитул также занимает ~ 100 пикселей, поэтому я хочу, чтобы изображение явно не отображалось поверх нижнего колонтитула.
Есть ли простое решение или трюк JS / CSS для реализации этого?