Фиксация одного из блоков на странице

239
06 декабря 2021, 06:30

Есть один основной блок, он делиться на два других.

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

Мне необходимо при скролинге странице фиксировать левый блок, что бы он оставался на месте, а правый скролился.

Answer 1

body { 
  margin: 0; 
  padding: 0; 
} 
 
.left { 
  position: fixed; 
  top: 0; 
  left: 0; 
	width: 275px; 
  height: 100px; 
  background: yellow; 
} 
 
.right { 
  background: red; 
  margin-left: 275px; 
  width: calc(100% - 275px); 
  height: 1500px; 
}
<div> 
  <div class="left block"> 
 
  </div> 
  <div class="right block"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet id donec ultrices tincidunt. Nullam vehicula ipsum a arcu cursus. Dictum sit amet justo donec enim diam. Tortor vitae purus 
    faucibus ornare. Massa massa ultricies mi quis. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Sed risus pretium quam vulputate dignissim suspendisse. Adipiscing elit pellentesque habitant morbi tristique senectus. Nec ullamcorper 
    sit amet risus. Ultrices sagittis orci a scelerisque purus semper eget. Dui vivamus arcu felis bibendum ut tristique et egestas. Dis parturient montes nascetur ridiculus mus mauris. Quam quisque id diam vel quam elementum pulvinar etiam non. Urna 
    duis convallis convallis tellus id interdum. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Non blandit massa enim nec dui nunc mattis enim. Sed ullamcorper morbi tincidunt ornare massa. Aliquam faucibus purus in massa tempor 
    nec feugiat nisl pretium. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit. Augue neque gravida in fermentum et. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Non odio euismod lacinia at. Nisl purus in mollis 
    nunc. Consequat nisl vel pretium lectus quam id. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. Ut venenatis tellus in metus vulputate eu scelerisque. Integer quis auctor elit sed vulputate. Augue eget arcu dictum varius. Molestie 
    at elementum eu facilisis sed odio morbi. In pellentesque massa placerat duis. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Sem et tortor consequat id 
    porta nibh. Mattis pellentesque id nibh tortor. Amet est placerat in egestas erat. Est ante in nibh mauris cursus. Sit amet purus gravida quis blandit turpis cursus. Aliquet nec ullamcorper sit amet risus nullam. Duis tristique sollicitudin nibh sit 
    amet. Quis enim lobortis scelerisque fermentum. Blandit massa enim nec dui nunc mattis enim ut tellus. Id aliquet lectus proin nibh nisl condimentum id. Lacus laoreet non curabitur gravida arcu ac. Phasellus vestibulum lorem sed risus ultricies tristique 
    nulla aliquet enim. Sodales ut eu sem integer vitae justo eget. Tellus in metus vulputate eu scelerisque felis. Malesuada fames ac turpis egestas integer eget aliquet nibh. Non pulvinar neque laoreet suspendisse interdum. Lacus vestibulum sed arcu 
    non odio euismod. Pellentesque sit amet porttitor eget dolor morbi non. Dolor purus non enim praesent elementum. Pharetra magna ac placerat vestibulum. Gravida neque convallis a cras semper auctor neque vitae. Habitant morbi tristique senectus et. 
    Turpis tincidunt id aliquet risus feugiat. Urna id volutpat lacus laoreet non curabitur gravida. Facilisi morbi tempus iaculis urna id volutpat. Auctor augue mauris augue neque gravida in fermentum. Sed vulputate odio ut enim blandit. Quis vel eros 
    donec ac odio tempor orci dapibus ultrices. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Velit egestas dui id ornare arcu odio ut sem nulla. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. 
  </div> 
</div>

READ ALSO
Каким способом решить эту задачу?

Каким способом решить эту задачу?

В метод даю массив который состоит из нечетных(четных) чисел, но 1 из чисел четный(нечетный) в каждом массивеМетод должен вернуть единственное...

186
Как обратится к классу, который находится внутри другого класса

Как обратится к классу, который находится внутри другого класса

Доброе утро!) Подскажите пожалуйста, у меняproduct__item используется в нескольких блоках, как указать в js, что добавлять класс нужно лишь тому у кого...

184
Парсинг обьекта Jquery из JSON

Парсинг обьекта Jquery из JSON

Я сохраняю джквери объект который содержит в себе кучу других элементов, в JSON, что-бы хранить его в локальном хранилище, и при загрузке(обновлении)...

231