header overlapping above scrollbar when using position fixed

Question

I have the following html structure and seems all to be working fine, but when I updated the header css to position:fixed its overlapping the scrollbar on the right side of screen, I tried making z-index:-1 but in this case the header links are not clickable, can somebody please suggest how to handle this:

Here is JSFiddle demo

body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
width: 100%;
height: 100px;
background: #CCC;
position: fixed;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}

<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>

UPDATE Please see the issue in image below

What do you mean by the header is overlapping the scrollbar? What browser/OS are you on? — Chris, Oct 27 '16 at 09:26
if you see the JSfiddle demo, the header is showing over scrollbar, and scrollbar is hiding in top area because of that. — Sanjeev Kumar, Oct 27 '16 at 09:27
I don't have that issue, hence why I'd like to know what browser/OS you are on. — Chris, Oct 27 '16 at 09:28
I have changed the header color, so it would be clear, check here: https://jsfiddle.net/sanjeevks121/b8tz6z0h/1/ — Sanjeev Kumar, Oct 27 '16 at 09:33
I think you mean to say that the scrollbar is overlapping the header, and not the other way around? — Chris, Oct 27 '16 at 09:34
scrollbar is behind the header, and header is showing over it — Sanjeev Kumar, Oct 27 '16 at 09:35
See this post: http://stackoverflow.com/questions/23057961/fixed-div-overlaps-scrollbar — andreas, Oct 27 '16 at 09:38
is the `scroller div` only needs to have scroll or the full page? — Undecided Dev, Oct 27 '16 at 09:39
is this what your looking for? https://jsfiddle.net/b8tz6z0h/3/ — Undecided Dev, Oct 27 '16 at 09:42

score 2 · Accepted Answer · edited May 23 '17 at 10:34

You can make that with Jquery for calculate the scrollbar width size.

Please try

$("header").width($("header").width() - getScrollBarWidth() + "px") 

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
  width:100%;
height: 100px;
background: #CCC;
position: fixed;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>

Function found here

score 0 · Answer 2 · answered Oct 27 '16 at 09:50

You just need a position absolute not position fixed.

body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
width: 100%;
height: 100px;
background: #CCC;
position: absolute;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}

<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>

thanks for the answer, Originally the idea was to make it fixed because the header will stick and show always and other things will scroll up/down, so just wondering if possible using position:fixed' ? — Sanjeev Kumar, Oct 27 '16 at 09:54
i don't have any idea if thats possible or not. but the way you show your code the `scroller` is the one that having scroll not the `page`. — Undecided Dev, Oct 27 '16 at 09:59
thanks for the input on this, the idea suggested by @P. Frank is good enough to handle — Sanjeev Kumar, Oct 27 '16 at 10:06

score -1 · Answer 3 · answered Oct 27 '16 at 09:46

put the div tag before the p tag & css for scroller class give margin-top:100px.

<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>

      <header>
        <h1>this is header</h1>
      </header>
    <div class="scroller">
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>


.scroller {
    overflow-y: scroll;
  margin-top: 100px;
}

he needs the scrollbar on full page not on specific `div` – Undecided Dev Oct 27 '16 at 09:48 — Undecided Dev, Oct 27 '16 at 09:48
Then Comment "position:fixed" in header. – Valarmathi Oct 27 '16 at 10:05 — Valarmathi, Oct 27 '16 at 10:05

header overlapping above scrollbar when using position fixed

3 Answers3