Прокрутка div из части липкого элемента.На приведенном ниже рисунке показан список книг, который можно прокручивать, и закрепленный разделитель.
Это изображение с закрепленным разделителем, расположенным позади 
Это нормальносостояние без залипания 
Я использовал раздел баннера ниже кода CSS
CODEPENLINK
<div class="banner_Section">abcd</div>
<div class="body_Section">mnop</div>
.banner_Section {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: url(https://www.dudleycourtpress.com/wp-content/uploads/2013/08/books.jpg) scroll no-repeat top center;
background-size: cover;
height: 200px;
}
.body_Section {margin: 200px 0 0 0; height: 400px; background: yellow;}
Исправлена прокруткаработает, но он отстает после секции баннера от белой части.
Прокрутка должна происходить из нижней части изображения.