Medium.com-как две колонки "липкая" прокрутка

Question

Вы, наверное, все знаете medium.com, и если нет, то это действительно отличный источник для чтения красивых статей.

Недавно они изменили свой дизайн, и на домашней странице теперь есть две колонки.

Основное содержимое и боковая панель (очевидно) имеют разную высоту, и теперь клевым эффектом является то, что боковая панель прокручивает страницу до тех пор, пока не достигнет нижней части своего содержимого, а затем продолжает придерживаться этой позиции при прокрутке остальной части страницы.

Я хотел бы воссоздать этот эффект в CSS и обычном javascript, может кто-нибудь помочь мне здесь?

Я быстро взглянул на их источник, который, к счастью, не полностью перекрыт, и они, кажется, устанавливают элемент данных, когда боковая панель достигает нижней части своего содержимого. Но мне пока не повезло, воссоздав весь эффект в javascript.

Answer 1

Я лично рекомендую использовать плагин Sticky-Kit jQuery. Это легкий, бесплатный и простой в использовании.

http://leafo.net/sticky-kit/

Если вы предпочитаете решение только для CSS, вы можете сделать что-то вроде этого:

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

Посмотрите на этот пример: http://css-tricks.com/examples/ScrollingSidebar/css.php