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

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

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

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

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

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

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

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

Заранее БЛАГОДАРЮ!!!
  • Вопрос задан
  • 217 просмотров
Пригласить эксперта
Ответы на вопрос 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; и размер он берет относительно родителя. а когда вы делаете блок фиксированным, размер берется относительно окна.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
21 окт. 2018, в 17:05
5000 руб./за проект
21 окт. 2018, в 16:38
50000 руб./за проект