Slidebars
Slidebars copied to clipboard
adchsm
Fixed header before scrollbar
I want to use sidebars with a fixed header. Followed these instructions (https://www.adchsm.com/slidebars/help/advanced-usage/elements-with-fixed-positions/). The header is fixed, but it appears in front of the scrollbars. Also, the width is set to exact window size, instead of the window size minus the width of the scrollbars. This causes alignment issues if you center content on the page, and content inside the fixed header.
My page structure looks like this, the wrapper div given by the CMS.
<!doctype html>
<html>
<head>...</head>
<body>
<div id ="wrapper">
<header id="header" canvas=""></header>
<div canvas="container"></div>
<div off-canvas="id-1 right push"></div>
<footer id="footer" canvas=""></footer>
</div>
</body>
</html>
The header has a fixed position. Header and footer are pushed aside as they should. However I need to override body, html { overflow: hidden; } to auto, as otherwise the page can't be scrolled. Setting #wrapper to overflow: auto doesn't show any effect, and [canvas="container"] { overflow-y: auto } isn't working either.
On the other hand it's semioptimal showing a scrollbar for the content and second one for the navigation ...
Edit: so, now I chose the above structure, set body, html { overflow: hidden; min-height: 100%; } and it seems to work just fine.
I had to increase the z-index on my fixed element, and its working fine now.
