CODEWITHSUNDEEP
csscss-position
Wibisono Indrawan
Wibisono Indrawan

Reputation: 596

CSS Sticky sidebar and fixed header

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 :

Upvotes: 1

Views: 9801

Answers (2)

Raeesh Alam
Raeesh Alam

Reputation: 3480

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>

Upvotes: 1

Nexo
Nexo

Reputation: 2331

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 class="wrapper">
  <div class="main">
    <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 class="sidebar">
    <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>

Upvotes: 1

Related Questions