How to keep a window-wide sticky element from scrolling within a wider block?

Question

I'm developing a web interface that involves a lot of scrolling, utilizing sticky positioning, which works beautifully except for one little detail. Below is a minimalist example. You can try it on CodePen to see how the stickies work when scrolling horizontally and vertically.

<header>
 <nav>
  <ul id=menu class=flex><li><a href="#">Menu bar item</a></li></ul>
 </nav>
 <div class=flex>
  <div id=button>Button</div>
  <div id=bar>Bar wider than the window</div>
 </div>
</header>
<main class=flex>
 <div id=leftbar></div>
 <div id=content></div>
</main>

*           {line-height: 2em; background-position: center center}
body        {margin: 0; padding: 0}
body, a     {color: #fff}
ul,li       {margin: 0; padding: 0; list-style-type: none}
.flex       {display: flex}
.flex > *   {flex: 0 0 auto}
header      {display: block; position: sticky; top: 0; left: 0; z-index: 1;
             width: min-content; min-width: 100%; background: #000066}
#menu       {flex-wrap: wrap; position: sticky; left: 0; width: 100vw;
             background: #006600}
#button     {position: sticky; left: 0; width: 4em; background: #000066}
#bar        {width: 150vw}
main        {min-height: 100vh} /* Ensure scrollbar */
#leftbar    {position: sticky; left: 0; width: 4em; background: #444444}
#content    {width: 150vw}
/* Background grid to visualize scrolling parts */
#bar, #leftbar, #content {
 background-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAO7u7v///yH5BAEKAAEA
 LAAAAAAQABAAAAIdhI9pwe0PnnRxzmphlniz7oGbmJGWeXmU2qAcyxQAOw==)}

The problem is in the topmost menu bar, which should always remain in place like a fixed header but must be sticky. 100vw width works perfectly until scrolling all the way to the right. At that point the leftmost part of the menu bar scrolls out of view, presumably due to the vertical scrollbar not being counted in 100vw.

Fixed positioning is out of the question, because the height of the menu bar will vary, so that'd need a pile of very ugly JS reading offsetHeight and moving the elements below after every DOM change – yuck!

Surely there is a way to fix this tiny problem in pure CSS or by altering the document structure?

Edit: I see JS solutions starting to pour in, so let's put a stop to that with these 3 lines of JS that fix the problem easily. I'd just prefer a CSS/HTML solution to avoid code maintenance problems in the future.

var f=function() {document.getElementById('menu').style.width=document.body.clientWidth+'px';};
window.addEventListener('DOMContentLoaded',f);
window.addEventListener('resize',f);

Answer 1

As mentioned in the comment, the problem is that 100vw includes the scrollbar-width. There is not really an elegant solution to this, but a workaround would be to reduce your #menu width to 99vw, and then fill up the empty space with a pseudo-element with the same background-color.

#menu {
  width: 99vw;
  background: #006600;
}
#menu:before {
  content: '';
  width: 5vw;
  left: 100%;
  top: 0;
  bottom: 0;
  position: absolute;
  background: inherit;
}

Beware that this works only if you have a flat background-color (no image, no transparency) on your #menu, so I'm not sure if it helps your case, but it's the best crossbrowser solution I could come up with.

See: https://codepen.io/anon/pen/WWLedm

Answer 2

Update

Setting the width of the scrollbar to 15px and setting the width of your green menu bar to calc(100vw - 15px) might do this.

I don't know any way to achieve this with pure CSS. However, you can achieve what you need with vanilla JS.

I used the function provided by @lostsource in this SO question to get the width of the scrollbar.

Then I created a function - resizeMenuBar() - which sets the width of the menu bar to the width of window.innerWidth minus the width of the scrollbar.

I added two event listeners - one for window.load and another one for window.resize. The event handler is the resizeMenuBar function.

* {
  line-height: 2em;
  background-position: center center;
}

body {
  margin: 0;
  padding: 0;
}

body,
a {
  color: #fff;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.flex {
  display: flex;
}

.flex>* {
  flex: 0 0 auto;
}

header {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: min-content;
  min-width: 100%;
  z-index: 1;
  background: #000066;
}

#menu {
  flex-wrap: wrap;
  position: sticky;
  left: 0;
  width: calc(100vw - 15px);
  background: #006600;
}

#button {
  position: sticky;
  left: 0;
  width: 4em;
  background: #000066;
}

#bar {
  width: 150vw;
}

main {
  min-height: 100vh;
}


/* Ensure scrollbar */

#leftbar {
  position: sticky;
  left: 0;
  width: 4em;
  background: #444444;
}

#content {
  width: 150vw;
}


/* Background grid to visualize scrolling parts */

#bar,
#leftbar,
#content {
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAO7u7v///yH5BAEKAAEALAAAAAAQABAAAAIdhI9pwe0PnnRxzmphlniz7oGbmJGWeXmU2qAcyxQAOw==);
}

body::-webkit-scrollbar {
  width: 15px;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #ccc;
}

body::-webkit-scrollbar-thumb {
  background-color: grey;
  outline: 1px solid grey;
}

<header>
  <nav>
    <ul id=menu class=flex>
      <li><a href="#">Menu bar item</a></li>
    </ul>
  </nav>
  <div class=flex>
    <div id=button>Button</div>
    <div id=bar>Bar wider than the window</div>
  </div>
</header>
<main class=flex>
  <div id=leftbar></div>
  <div id=content></div>
</main>

Answer 3

^{The below hack seems to work fine only on chrome}

Here is a hack where the idea is to increase the width of the parent of the sticky element to have enough room for the sticky behavior then use some translation to rectify the extra width and position:

* {
  line-height: 2em;
  background-position: center center;
}
body {
  margin: 0;
  padding: 0;
}
body,
a {
  color: #fff;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.flex {
  display: flex;
}
.flex > * {
  flex: 0 0 auto;
}
header {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: min-content;
  min-width: 100%;
  z-index: 1;
  background: #000066;
}
/*addedd*/
nav {
  width: calc(100% + 60px);
  transform: translateX(-60px);
}
/**/
#menu {
  flex-wrap: wrap;
  position: sticky;
  left: 0;
  width: 100vw;
  background: #006600;
  transform: translateX(60px); /*added*/
}
#button {
  position: sticky;
  left: 0;
  width: 4em;
  background: #000066;
}
#bar {
  width: 150vw;
}
main {
  min-height: 100vh;
} /* Ensure scrollbar */
#leftbar {
  position: sticky;
  left: 0;
  width: 4em;
  background: #444444;
}
#content {
  width: 150vw;
}
/* Background grid to visualize scrolling parts */
#bar,
#leftbar,
#content {
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAO7u7v///yH5BAEKAAEALAAAAAAQABAAAAIdhI9pwe0PnnRxzmphlniz7oGbmJGWeXmU2qAcyxQAOw==);
}

<header>
 <nav>
  <ul id=menu class=flex>
   <li><a href="#">Menu bar item</a></li>
  </ul>
 </nav>
 <div class=flex>
  <div id=button>Button</div>
  <div id=bar>Bar wider than the window</div>
 </div>
</header>
<main class=flex>
 <div id=leftbar></div>
 <div id=content></div>
</main>

60px is a random value that should simply be bigger than the scroll width.

It's not trivial to get the trick but if you remove the translate you will have the following:

* {
  line-height: 2em;
  background-position: center center;
}
body {
  margin: 0;
  padding: 0;
}
body,
a {
  color: #fff;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.flex {
  display: flex;
}
.flex > * {
  flex: 0 0 auto;
}
header {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: min-content;
  min-width: 100%;
  z-index: 1;
  background: #000066;
}
/*addedd*/
nav {
  width: calc(100% + 60px);
}
/**/
#menu {
  flex-wrap: wrap;
  position: sticky;
  left: 0;
  width: 100vw;
  background: #006600;
}
#button {
  position: sticky;
  left: 0;
  width: 4em;
  background: #000066;
}
#bar {
  width: 150vw;
}
main {
  min-height: 100vh;
} /* Ensure scrollbar */
#leftbar {
  position: sticky;
  left: 0;
  width: 4em;
  background: #444444;
}
#content {
  width: 150vw;
}
/* Background grid to visualize scrolling parts */
#bar,
#leftbar,
#content {
  background-image: url(data:image/gif;base64,R0lGODlhEAAQAIABAO7u7v///yH5BAEKAAEALAAAAAAQABAAAAIdhI9pwe0PnnRxzmphlniz7oGbmJGWeXmU2qAcyxQAOw==);
}

<header>
 <nav>
  <ul id=menu class=flex>
   <li><a href="#">Menu bar item</a></li>
  </ul>
 </nav>
 <div class=flex>
  <div id=button>Button</div>
  <div id=bar>Bar wider than the window</div>
 </div>
</header>
<main class=flex>
 <div id=leftbar></div>
 <div id=content></div>
</main>

The nav is overflowing which will logically increase the scroll. Imagine now that you will only scroll without considering the extra 60px. This will work fine but of course the user will not stop scrolling before 60px, so the trick is to move the oveflow to the left side by using translate.