Sticky header scrolls out of view when scrolling horizontally

Question

I have a header that I would like to be sticky both during vertical and horizontal scroll. I would like it to be sticky due to the height of the header being dynamic(otherwise I could use fixed if I'm not mistaken).

I have played around with a fiddle with no success :(

https://jsfiddle.net/Viktor/39v0gzjh/22/

CSS:

html, body{
  width:100%;
  background-color:red;
  opacity:0.9;
  padding:0;
  margin:0;
}

.header{
  position:sticky;
  top:0;
  left:0;
  background-color:gray;
  height: 100px;
  padding:0;
}

.container{
  display: flex;
}

.child{
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv{
  width:1000px;
  height:1000px;
}

HTML:

<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
  child1
  </div>
  <div class="child">
  child2
  </div>
  <div class="child">
  child3
  </div>
  <div class="child">
  child4
  </div>
  <div class="child">
  child5
  </div>
  <div class="child">
  child6
  </div>
  <div class="child">
  child7
  </div>
  <div class="child">
  child8
  </div>
  <div class="child">
  child9
  </div>
  <div class="child">
  child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>

Ichraf · Answer 1 · 2019-06-12T12:41:39.230

1

If you are using bootstrap, just add fixed-top class to your header:

<div class="header fixed-top">
  This is my sticky header
</div>

Otherwise, with css, header position should be "position:fixed;" and its width "width: 100%;" and then place other page content below like this fiddle:

https://jsfiddle.net/s071hnxL/

edited Jun 12 '19 at 12:41

answered Jun 12 '19 at 12:33

Ichraf

345
1
7

This is indeed the behavior I want, but as I said I can't use fixed. The height of the header can change, so I can't set a fixed padding-top/margin-top. I need the content below the header to come directly below. – Viktor Eriksson Jun 12 '19 at 18:45

Priyesh Diukar · Answer 2 · 2019-06-12T13:25:11.490

A better approach would be set overflow-x: scroll; on your html. This will solve the issue.

Note that sticky, by specification, will not work inside element with overflow. This is a known issue

Hence, try using javascript in combination with position:fixed

$(window).scroll(function() {
  if( $(this).scrollTop() > 0 ) {
    $('.header').addClass('sticky');
  } else {
    $('.header').removeClass('sticky');
  }
});

html,
body {
  width: 100%;
  background-color: red;
  opacity: 0.9;
  padding: 0;
  margin: 0;
  overflow-x: scroll;
}

.header {
  width: 100%;
  background-color: gray;
  height: 100px;
  padding: 0;
}

.sticky {
  position:fixed;
  top:0;
  width: 100%;
  left:0;
}

.pt-100{
  padding-top: 100px;
}

.container {
  display: flex;
}

.child {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv {
  width: 1000px;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
    child1
  </div>
  <div class="child">
    child2
  </div>
  <div class="child">
    child3
  </div>
  <div class="child">
    child4
  </div>
  <div class="child">
    child5
  </div>
  <div class="child">
    child6
  </div>
  <div class="child">
    child7
  </div>
  <div class="child">
    child8
  </div>
  <div class="child">
    child9
  </div>
  <div class="child">
    child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>

It is one step towards the right direction. Problem is that when setting overflow:scroll the scrollbar becomes disabled. It doesn't understand that it's content is outside the viewport. When inspecting the DOM the body is only the width of the viewport while div.bigdiv is 1000px wide. How come ? Shouldn't body expand to the width of it's widest child ? — Viktor Eriksson, Jun 12 '19 at 16:40
@ViktorEriksson depends on your use case. If your layout is design is going to guide navigate users verically. It makes more sense to restrict your widest child within the body with a horizontal scroll. — Priyesh Diukar, Jun 13 '19 at 02:50

AdityaSrivast · Answer 3 · 2019-06-13T09:54:13.077

position: sticky is working fine. The reason that you're unable to see it's effect is because of the position applied on div(not the visible text) and the width of the div, which is taking up 100% of its parent's div, which in this case is body.
So when you're scrolling horizontally, you're still inside the div, which is taking up the complete width space available.
Now if you want to view the content inside div.header irrespective of the scroll, modify its width as width: 100vw and it should work fine.
You can verify by setting the width of body to 140% and .header to be 100vw
All the best. Cheers!

Sticky header scrolls out of view when scrolling horizontally

3 Answers3