Fixed header with overlay collapse and fixed nav

[Krishnanandkg]

Hi, am a newbie, is there anyway i could implement a fixed header with items in the offcanvas fixed [on page scroll.]. Also the offcanvas should collapse when clicked anywhere outside.

• tried to combine the fixes mentioned in other posts, but couldnt make it work.

Heres something I've tried:

$(function() {

$('#scotch-panel').scotchPanel({
    containerSelector: '#site-wrapper',
    direction: 'right',
    duration: 300,
    transition: 'ease',
    clickSelector: '.toggle-panel',
    distanceX: '460px',
    enableEscapeKey: true
});

$('.toggle-panel').click(function() {
    scotchPanel.toggle();
    return false;
});

$('.overlay').click(function() {
  // CLOSE ONLY 
   #fixed-nav.close();
});

});

Couldnt make it work tho.

Appreciate any help.