Имеется следующий код:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>Header</header>
<main>
<div class="container">
<div class="row justify-content-around">
<div class="col-12 col-sm-8 col-md-6 col-lg-5 content-1">Content 1</div>
<div class="col-12 col-sm-8 col-md-6 col-lg-5" id="sidebar">Sidebar</div>
<div class="col-12" id="large-content-block">Large content</div>
<div class="col-12 col-sm-8 col-md-6 col-lg-5 content-2">Content 2</div>
<div class="col-lg-5"></div>
</div>
</div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
body {
color: #fff;
}
header, footer {
background-color: green;
padding: 50px 25px 50px;
}
.content-1, .content-2 {
background-color: lightblue;
padding: 50px 20px 50px;
height: 800px;
margin-top: 30px;
margin-bottom: 30px;
}
#sidebar {
background-color: lightblue;
padding: 50px 25px 50px;
height: 200px;
margin-top: 30px;
margin-bottom: 30px;
}
#large-content-block {
background-color: red;
padding: 50px 25px 50px;
height: 200px;
margin-bottom: 30px;
}
Необходимо выполнить следующее:
- Сделать #sidebar липким, при этом скролл данного элемента должен останавливаться при достижении #large-content-block.
- После того, как мы проскроллим элемент #large-content-block, #sidebar снова должен скроллиться. Скролл должен останавливаться при достижении футера.
Каким путем можно реализовать данный функционал?
Codepen:
https://codepen.io/anon/pen/byqQyp 
