I have a website with a sticky sidebar and fixed header

There's a problem when I start scrolling the pages, the sidebar is covered by the header

Here's pretty rough of js fiddle

Any way to fix this problem?

javascript solution is okay if there's no way to fix it with CSS

The only solution with javascript that I can think of is to check how far the user has been scrolled away, then add padding top to sidebar, something like this

let distance =  document.querySelector('.sidebar').getBoundingClientRect().top;

    if (distance <= 0 && viewport_width >= 768) {

        $('.sidebar').css('paddingTop', '150px');

    } else {

        $('.sidebar').css('paddingTop', '0px');

    }

Edit :

• I want the z-index for header and sidebar to be the same
• Both element should not be stacked against each other

CodePudding user response：

You need to define z-index on #header{z-index: 10;} and don't need to use float so you can achieve with display: flex & order:1 properties and use position: sticky; top:110px on #sidebar for stick without JavaScript.
Check my below snippet

*{box-sizing: border-box;}
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
h2,p{margin: 0;}
#header {
    position: fixed;
    width: 100%;
    max-width: 800px;
    height: 80px;
    top: 10px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: black;
    color:red;
    z-index: 10;
}
#body{
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #ccc;
    padding: 5px;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    margin: 110px auto 20px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#sidebarWrap {
    position: sticky;
    top: 110px;
    height: auto;
    min-width: 210px;
    max-width: 210px;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    background-color: #72f8cb;
    order: 1;
}
#content {
    width: 100%;
    height: 800px;
    background-color: #f8d3a2;
}
#footer {
    height: 800px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 5px;
    background-color: #ccc;
}

<div id="header">
    <h2>Header</h2>
    <p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla</p>
</div>

<div id="body">
    <div id="sidebarWrap">
        <div id="sidebar">
            <h2>Sidebar</h2>
            <p>Sidebar has content in it and will be sticky until it's bottom container reaches the footer container.
                Then it will scroll up as expected. But will be blocked by fixed header</p>
        </div>
    </div>
    <div id="content">
        <h2>Content</h2>
        <p>This is the main content section.</p>
    </div>
</div>

<div id="footer">
    <h2>Footer</h2>
    <p>This is the footer</p>
</div>

CodePudding user response：

Read this article for more details.

.sidebar {
  width: 25%;
  height: 25vh;
  min-height: 200px;
  overflow: auto;
  position: sticky;
  top: 5%;
}

.main {
  width: 60%;
  height: 200vh;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}

.main,
.sidebar {
  border: 5px solid #222;
  background-color: white;
  border-radius: 10px;
  color: #222;
  padding: 15px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

body {
  padding: 3%;
  background-color: #ccc;
  font-size: 20px;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
}

code,
pre {
  background-color: #ccc;
  padding: 0 3px;
  border-radius: 5px;
}

.bottom {
  justify-self: bottom;
}

<div id="header">
  <h2>Header</h2>
  <p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla blaba lb lablablablablalba balb lab alb alb la</p>
</div>
<div >
  <div >
    <h2>Main content</h2>
    <p>Scroll down the page!</p>
    <h3>How to recreate this</h3>
    <p>
      Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky:
      <pre>
.sidebar {
  position: sticky;
  top: 0;
}
    </pre> Include <code>position: -webkit-sticky;</code> for Safari.
    </p>
  </div>

  <div >
    <h3>Sticky sidebar</h3>
    <p>I will follow you!</p>
    <p><a href="https://caniuse.com/#search=sticky">caniuse stats</a>
  </div>
</div>
<div id="footer">
  <h2>Footer</h2>
  <p>This is the footer</p>
</div>