Как прибить блок не только к верху, но и к краю контейнера?

Question

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

Здраствуйте коллеги.

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

САБЖ:
Есть вот такая страница
itrealstory.com/bu/bf/in/maria_t

На ней есть сайдо бар, который при прокрутке прилипает к верху страницы. Это сделано скриптом, который добавляет класс с position: fixed;. Но я не могу сообразить КАК приклеить его еще и правому боку основного контейнера? Сейчас это тупо прибито медиаазапросом. Получается, счто на БОЛЬШИХ экранах сайдобар "улетает" в право.

ВОПРОС: Как приклеить сайдобар не только к верху страницы, но и к правому краю главного контейнера.

Заранее ОГРОМНОЕ спасибо!!!

Сайдобар исчизает при ширине 800 пикс.

Прошу, подскажите, как такое реализовать.

Answer 1

[Ankhena]

На JS либо calc (calc если ширина контейнера всегда известна и не меняется 100500 раз в media)
Узнать ширину окна, вычесть из нее ширину контейнера, поделить пополам.
Полученное задать в качестве right для сайдбара

Comments

[Алёша]

Опередил меня.

[Алёша]

А где верстку преподают?

[Алёша]

Онлайн курсы какие-то?

[Ankhena]

Алексей Набережный: Сейчас, на каждом углу, мне кажется :) В любом многопрофильном учебном центре.

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

Ankhena W прошу, пропишите как пример, если 630 пикс. это контейнер.

[Ankhena]

Полина Емельянова: right: calc(50% - 315px)

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

Ankhena W: не работает... Буду курить предложение от фондейшн
foundation.zurb.com/sites/docs/sticky.html

[Ankhena]

Полина Емельянова: В смысле не работает? Мне кажется, что не работать оно может только если логика "прибития" другая.

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

Ankhena W: itrealstory.com/bu/bf/in/maria_t - пробуйте сами. Сайдебар по-прежнему "отъезжает" в сторону на широком экране.

[Ankhena]

Полина Емельянова: на 1920 я вижу:

.topWindow {
    position: fixed;
    top: 0;
    right: 20%;
}

.sidebar {
    float: left;
    width: 309px;
    font-size: 12px;
}

right: 20%; а совсем не calc
Если я в DevTools заменю 20% на calc, то вижу именно то, что нужно :)

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

Ankhena W: РАБОТАЕТ!!! Я забодалась с контейнером - вообще не читаю, что вы говорите(((((((
Поставила контейнеру ширину и отняла, как вы и сказали!!!

[Ankhena]

Полина Емельянова: уррррааа ))))))

Answer 2

[Genexys]

Ты fixed не как не прилепишь к какому то контейнеру. Блок fixed идет отдельным слоем от всего потока. Посмотри как там сделано, он не прибит не к какому блоку просто при добавлении класса с fixed задается right с нужной величиной и все