Появляющийся блок (акардеон) при прокрутке

Есть вот такая страница http://kuzia-test.ho.ua/prew/product-list-2.html

На ней превью товаров (картинки с подписями) и список товаров. Превью ссылаются на определенное место в списке товаров.

Нужно сверстать так что бы при прокрутке страницы, блок с превьюшками сворачивался в полоску в верху экрана - пример меню http://demo.webcomplex.com.ua/17-07-2012/01/

При клике на полоску она раскрывается (как акардеон) занимает около 30% экрана, в ней те же превьюхи товаров (можно чуть меньше по размеру). Если превьюшек много, то их можно тоже прокрутить. При клике на картинку (ссылку на якорь) нас перебрасывает в нужное место, а аккордеон сворачивается.

Шаблон сайта сделан при помощи bootstrap, потому большинство классов для колонок, аккордеонов и списков миниатюр уже есть.

Шаблон оригинал с существующими элементами http://www.os-templates.com/website-templates/template-demos/free-website-templates/rs-1200-prototype-13/

Просьба указывать ориентировочную стоимость