Sanjeev K Sanjeev K - 1 month ago 9
CSS Question

header overlapping above scrollbar when using position fixed

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

enter image description here

Answer

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

Comments