Как правильно задать отступ от шапки для position:sticky блока?

Question

[Алексей Скляров]

Пытаюсь реализовать одну вещь: у меня имеется фиксированное меню в верхней части страницы, с position:fixed;, затем идет сам бутстраповский контейнер:

<div class="container">
	<div class="row">
		<div class="col-lg-6">
			<article class="">
				
			</article>
		</div>
		<div class="col-lg-6">
			<div class="image sticky-top">
				<img src="" alt="">
			</div>
		</div>
	</div>
</div>

Я хочу сделать так, чтобы у меня прокручивалась только статья. Для этого сделан фиксированный херед, но вот с изображением, которое будет справа, у меня возникают проблемы. Для него добавлен бутстраповский .sticky-top, при прокручивании блок начинает прокручиваться до верхнего края окна браузера, после чего "приклеивается" к нему. Но так как там фиксированное меню, все это друг на друга наезжает. Не пойму как сделать так, чтобы блок с картинкой при прокручивании сразу был закреплен на той позиции экрана, на которой он расположен в сетке? Если делать это через position: fixed, то я не могу его расположить так как нужно, ибо мне не известны координаты правой части моего контейнера. Как решить эту задачу?



То есть меню и фотография должны быть у меня на месте все время. А прокручиваться должен только блок со статьей. Если сделать фиксированную шапку еще можно, для которой добавляется просто отступ, то вот картинку - уже нет.

Answer 1

[DimaDolgoter]

https://codepen.io/anon/pen/ejjXjd главное чтоб не было флоатов