css - How to combine slide-in panels with sticky header? -

i'm working on css-based 3-column layout has following requirements:

• on desktop…
  • …all columns shown.
• on mobile devices…
  • …only middle column shown.
  • …the left column can slide in left, triggered swipe or tap on button.
  • …the right column can slide in right, triggered swipe or tap on button.
• independent of device…
  • …the middle column contains 3 rows: main header, sub header, , actual content.
  • …the main header scrolls away when scrolling down.
  • …the subheader sticky on top of screen when scrolling down.

now tried implement this:

• creating 3-column layout , hiding left , right columns easy, using bootstrap.
• having 3 rows in middle column easy, too.
• to make subheader sticky, have 2 options:
  • use position: sticky (best solution in technical terms, not supported browser).
  • use script, attach scroll event , change position: fixed on demand. bootstrap offers ootb affix plugin. using plugin, it's easy task, too.
• creating 2 sidebars , sliding them in easy well, using such snap.js.

problems start when want combine sticky subheader sliding sidebars: affix plugin stops working, , subheader not sticky more. basically, problem comes down issues css transform , position: fixed, see eric meyer's awesome blog post on this , this answer.

one option solve put headers above area sidebars slide in, not affected, not want: want sidebar push away everything.

how can solve this? possible @ all?

consider post: applying snap.js main content wrapper seems break *some* of jquery functions

bootstraps affix.js listens $(window).on('scroll'... event. snap.js seems change scrollable element "window" element element added "snap-content" class. dont see other solution write sticky functionality provided bootstrap yourself.

use reference. based on current scroll position (in pixels) can add css attributes or whole css classes element want make sticky:

jquery(document).ready(function ($) { $('.snap-content').scroll(function () {     if ($(this).scrolltop() > 140) {         if ($("#navbar").css('position') !== 'fixed') {             $("#navbar").css("position", "fixed");         }     } else {         if ($("#navbar").css('position') !== 'static') {             $("#navbar").css("position", "static");         }     } }); 

});