Makes fixed navbar non-fixed about scotch-panels HOT 8 CLOSED

That makes perfect sense. Unfortunately, you should read this: https://code.google.com/p/chromium/issues/detail?id=20574 regarding it.

In short, webkit transforms and fixed positions don't work nicely yet. Although 3D Transforms work in modern browsers, there are still bugs (hence the prefix meaning it isn't 100% ready yet). I read up on this a lot, and the way transforms are mapped will make it real hard for this to even ever work together in the future (see: http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue).

Transforms do work on fixed elements, just not when the parent container is fixed. If you check this demo http://panels.scotch.io/demos/javascript-only/index.html there's a way to turn off the use of CSS3 Transforms as the easiest and quickest fix. The only problem is that it's not as performant (smooth) as the transform since the Panel is done via JS instead, but it still works and most websites, I would say, do it this way. That would be a quick and easy solution for you. The alternative is you would need to find creative workarounds like this: http://codepen.io/ncerminara/pen/Acybr and http://codepen.io/ncerminara/pen/fwHjL

If you are getting real custom, you can read this tutorial: http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms and try to learn how it works and come up with your own solution versus using the plugin.

But... I already did that for you 😃! Here's your example with a creative custom workaround done: http://codepen.io/ncerminara/pen/ecDfd.

Lastly, here's probably a better example of what I think you're trying to accomplish: http://codepen.io/ncerminara/pen/rtesj

I hope that helps! Remember these are work arounds and you'll have to test away for browser support and stuff. Check the edits I made to CSS and JS.

You're giving me a lot of valuable feedback Jake! If you're using this for a commercial project, please consider buying a license to support http://scotch.io. http://shop.scotch.io/collections/frontpage/products/scotchpanels-js-commercial-license Thanks!

from scotch-panels.

Thanks for the help. I figured it might be something that wasn't immediately fixable.

from scotch-panels.

Also, yeah I'm planning on using this for a commerical project eventually. When I figure out that using Scotch Panels is definitely the way to go I will most definitely be buying a license. I'm looking over the examples right now figuring out the differences. Also, I'm trying to figure out how you kept the panel fixed to top of the screen as well.

from scotch-panels.

Thanks. It's moved outside of the wrapper. It's a little tricky how this work-around works. It's basically putting a fixed element at the top (as the nav) and to the side (the panel) that are both outside of the container. Then the panel acts to just move the body

from scotch-panels.

Hi there! Noticed this issue still happens for non-mobile view for some reason even though I've added the useCSS: false flag —

— shows up while the browser width is > 600px.

from scotch-panels.

Oh just kidding, I forgot that was in the CSS for the panel on my end. Maybe make a note about this in the tutorial here: https://panels.scotch.io/demos/side-menu-mobile-only-with-css/index.html ?

from scotch-panels.

Used the API Callbacks to remove the transform and removed completely from plugin (kind of hacky, but...):

$('#mypanel').scotchPanel({
useCSS: true,
containerSelector: 'body',
direction: 'top',
duration: 300,
transition: 'ease',
clickSelector: '.searchBtn',
distanceX: '70%',
enableEscapeKey: true,
beforePanelOpen: function() {
      $('.scotch-panel-canvas').css({
                '-moz-transform': 'translate3d(0, 0, 0)',
                '-ms-transform': 'translate3d(0, 0, 0)',
                '-o-transform': 'translate3d(0, 0, 0)',
                '-webkit-transform': 'translate3d(0, 0, 0)',
                'transform': 'translate3d(0, 0, 0)'
      });
      $("html, body").animate({ scrollTop: 0 }, "slow");
      return false;
    },
afterPanelClose: function() {
        $('.scotch-panel-canvas').css({
                '-moz-transform': '',
                '-ms-transform': '',
                '-o-transform': '',
                '-webkit-transform': '',
                'transform': ''
      });
    }
});

from scotch-panels.

Trying to fix the position fixed issue myself, not having any luck with getting the above method working in Chrome - my fixed position div isn't fixed - any help would be appreciated!

from scotch-panels.