Для достижения желаемого эффекта, когда один блок скролится, а другой остается на месте, можно использовать CSS свойство position: fixed
.
Для начала, у вас должны быть два блока - один, который будет скролиться, и второй, который останется на месте.
Пример HTML разметки может выглядеть следующим образом:
<div class="scrolling-block"> <!-- Содержимое скролируемого блока --> </div> <div class="fixed-block"> <!-- Содержимое блока, оставшегося на месте --> </div>
Далее, вам необходимо применить соответствующие стили для этих блоков. Стили могут выглядеть так:
.scrolling-block { overflow-y: scroll; height: 100vh; /* или любая другая высота, definied в px, %, rem, и т.д. */ } .fixed-block { position: fixed; top: 0; width: 100%; /* или любая другая ширина, definied в px, %, rem, и т.д. */ background-color: white; /* jQuery, etc. */ }
В данном примере, overflow-y: scroll
приведет к появлению полосы прокрутки в скролируемом блоке, если его содержимое выходит из видимой области. height: 100vh
задает высоту блока в 100% высоты видимой части окна браузера, но вы также можете использовать любые другие значения.
А свойство position: fixed
совместно с top: 0
зафиксирует второй блок в верхней части страницы, таким образом, он останется на месте при прокрутке.
Важно отметить, что при использовании position: fixed
, фиксированный блок может залезать на другие элементы, поэтому вам может потребоваться добавить дополнительные стили, чтобы избежать этого.
Надеюсь, это поможет вам реализовать функционал, который вы ищете. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать!