Medium.com-как две колонки "липкая" прокрутка
Вы, наверное, все знаете medium.com, и если нет, то это действительно отличный источник для чтения красивых статей.
Недавно они изменили свой дизайн, и на домашней странице теперь есть две колонки.
Основное содержимое и боковая панель (очевидно) имеют разную высоту, и теперь клевым эффектом является то, что боковая панель прокручивает страницу до тех пор, пока не достигнет нижней части своего содержимого, а затем продолжает придерживаться этой позиции при прокрутке остальной части страницы.
Я хотел бы воссоздать этот эффект в CSS и обычном javascript, может кто-нибудь помочь мне здесь?
Я быстро взглянул на их источник, который, к счастью, не полностью перекрыт, и они, кажется, устанавливают элемент данных, когда боковая панель достигает нижней части своего содержимого. Но мне пока не повезло, воссоздав весь эффект в javascript.
1 ответ
Я лично рекомендую использовать плагин Sticky-Kit jQuery. Это легкий, бесплатный и простой в использовании.
Если вы предпочитаете решение только для 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