bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман

Как «зафиксировать» ширину блока при присвоении position: fixed; и контролировать его поведение?

Здравствуйте коллеги.
Прошу, помогите разорбраться с изучением свойств position: fixed; Спека до того замудрена, что я теряюсь.

САБЖ: Есть блок, находящийся, предположим в сайдобаре, вторым по счету. Вот его и надо "приколотить" при прокрутке.

Проблем нет, махонький скриптик - готово! НО!!!! При прокрутке он резко меняет:
а. Положение (что, в принципе, естественно, т.к. отчет от экрана, и с этим можно бороться.)
б. Размеры (А вот это непонятка!).

Рабочий образец:
https://codepen.io/emelyanova/pen/NayOQY

ВОПРОС:
1. Как контролировать размеры прилепляемого блока? Особенно если нужен адаптив.
2. Как контролировать поведение и сделать плавное "скольжение" блока без прыжков на старте?

УСЛОВИЯ: не надо библиотек. Хочу сама разобраться. Подскажите что пропустила в спеке

Заранее БЛАГОДАРЮ!!!
  • Вопрос задан
  • 3022 просмотра
Пригласить эксперта
Ответы на вопрос 2
alvvi
@alvvi
export default apathy;
Вообще поведение полностью логичное. Вы сами пишите
что, в принципе, естественно, т.к. отчет от экрана, и с этим можно бороться

относительный размер (как у вас) тоже будет считаться от экрана.
Насколько я понимаю эту проблему призван решить position: sticky, (поправьте, если нет) но работает он пока что далеко не везде.

1. В любом решении без JS необходимо будет какое-то фиксированное значение, один из вариантов: добавить контейнеру фиксированный max-width, а блоку
width: inherit;
max-width: inherit;

Таким образом блок унаследует max-width контейнера и не будет выходить за его пределы.

2. Как контролировать поведение и сделать плавное "скольжение" блока без прыжков на старте?

"Прыжок" в вашем случае это премещение на 12px от края экрана, поскольку вы добавляете класс с
position: fixed 
top: 12px
только когда scrollTop становится равен offsetTop, а после этого он естественно отпрыгивает вниз на 12px. Чтобы избежать этого надо добавлять класс когда scrollTop равен (offsetTop - 12px), потому что в этом случае блок при добавлении будет уже в "нужном" месте.

https://codepen.io/Alvvi/pen/MEXeaV
Ответ написан
Комментировать
.fixed {
	position: relative;
	//width: 100%;
	margin: 0 auto;
	border: 1px solid #0C0;
	background: #EAFFEA;
}


потому что тут position: relative; и размер он берет относительно родителя. а когда вы делаете блок фиксированным, размер берется относительно окна.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы