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

Question

[Полина Емельянова]

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

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

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

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

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

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

Заранее БЛАГОДАРЮ!!!

Answer 1

[alvvi]

Вообще поведение полностью логичное. Вы сами пишите

что, в принципе, естественно, т.к. отчет от экрана, и с этим можно бороться

относительный размер (как у вас) тоже будет считаться от экрана.
Насколько я понимаю эту проблему призван решить 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

Answer 2

[Abdula Magomedov]

.fixed {
	position: relative;
	//width: 100%;
	margin: 0 auto;
	border: 1px solid #0C0;
	background: #EAFFEA;
}

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

Comments

[Полина Емельянова]

Убрала позиционирование - не помогло.

[Abdula Magomedov]

Полина Емельянова, нее. я просто объяснял вам почему так происходит. укажите ширину блока фиксировано. это же фиксированный блок. у вас указан в %. т.е. 20%. и по этому он будет гулять на всех устройствах. укажите в пикселях ширину

[Abdula Magomedov]

Полина Емельянова, shpargalkablog.ru/2013/09/scroll-block.html там третий пример как ваш

[Полина Емельянова]

Abdula Magomedov, БОЛЬШОЕ СПАСИБО!!!!
Скажите, а как быть с адаптивом? я могу указать max-width: 255px; - но оно, ясно дело не сработало...
По идее ширину именно этого блока можно фиксировать, а жать "экран" за счет других блоков...

[Abdula Magomedov]

Полина Емельянова, через media запросы для каждого семейства экранов указать разные размеры, наверное.

[Abdula Magomedov]

Полина Емельянова, А вообще, процентами пользоваться это плохая практика. С этим проблемы будут потом.