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

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

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

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

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

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

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

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

Заранее БЛАГОДАРЮ!!!
  • Вопрос задан
  • 171 просмотр
Пригласить эксперта
Ответы на вопрос 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
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы