Баннер упирался и останавливался перед <div> ?

[usergeyv]

Разметка

<div class="index">
текс
</div>
<div class="web">
текст
<div class="preview">
    баннер
</div>
</div>

CSS preview:

.preview {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 370px;
    margin: 70px 15px 0 0;

Проблема в том что баннер поверх текста в div class="index"> , а нужно что бы при прокрутки вверх или в низ , баннер упирался и останавливался перед <div class="index"></div> , помогите кодом

 

[ultra]

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[usergeyv]

Для просмотра ссылки Войди или Зарегистрируйся

Как применить к моему примеру?

Как применить к моему примеру?

<div class="index">
текс
</div>
<div class="web" data-sticky-container>
текст
<div class="preview" data-sticky>
баннер
</div>
</div>
<script src="sticky.js"></script>

Спойлер: sticky.js

Для просмотра ссылки Войди или Зарегистрируйся