Навигация, «вытягиваемая» жестом

[slateclub]

Нашёл интересный материал на эту тему:

Главное, что работает и жестом, и мышкой на компе, а также простым нажатием на ссылку-кнопку меню. Ковырясь в демке получилось сделать кнопку фиксированной при прокрутке сайта.

Демо:

Однако есть весомые косяки (может кто поможет исправить?
1. Выдвинуть и задвинуть панель можно только на черной полосе (в css hight везде стоит 100%) - как растянуть её на всю высоту?
2. Как фиксировать красную выдвигаемую область, что бы после прокрутки страницы вниз и вызове меню эта красная область была в фокусе?

круто, всё работает!
А чтобы добавить прокрутку к красной области, в случае если пунктов меню много, я добавил вот что:

    #sidebar {
        overflow: auto;
    }

 

[wiggly]

Добавьте эти стили.

#sidebar {
    position: fixed;
    left: -240px;
    transition: left 0.4s ease-in-out;
}

.container.open-sidebar #sidebar {
    left: 0;
}

.swipe-area {
    position: fixed;
    transition: left 0.4s ease-in-out;
}

.container.open-sidebar .swipe-area  {
    left: 240px;
}