Sticky sidebar following a complete-page header

Question

Sticky sidebar following a complete-page header

I recently added a fixed sidebar to my website:

However, I'm facing an issue where the sidebar appears in front of my full-page header when I set its position to fixed. What I actually want is for the sidebar to start after the header as if it were positioned absolutely with top: 100vh, but still remain fixed when scrolling down.

Is there a way to achieve this desired effect? Thank you for any help!

body {
  margin:0;
}

#header {
  height: 100vh;
  width:100%;
  position:relative;
  background-color:blue;
}


#main {
        margin-left: 20vw;
        height: 100vh;
    }
    
    sidebar {
        width: 20vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #130E0A;
        position: fixed;
        z-index: 1;
    }

<!DOCTYPE html>
    <html>
        <head>
    <title>Exploring Controversy: The Four Color Theorem and Computer Proofs</title>
            <meta name='viewport' content='initial-scale=1.0'>
            <meta charset='utf-8'>
        </head>
        <body>
    <section id='header'></section>
    
            <section id='main'>
                <sidebar></sidebar>
                <div id='timeline' class='cd-container'></div>
            </section>
        </body>
    </html>

html css

Answer 1

Answer №1

If you're familiar with jQuery, you can implement something like this:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     // Use >= instead of <=
    if (scroll >= 1000) {
        // Make sure to use "clearHeader" instead of "clearheader"
        $("sidebar").addClass("fixed");
    }
    else {
      $("sidebar").removeClass("fixed");
    }
}); // Don't forget to add the closing parentheses );

body {
  margin:0;
}

#header {
  width:100%;
  background-color:blue;
   height: 1000px;
}


#main {
        margin-left: 20vw;
        height:10000px;
    }
    
    sidebar {
        width: 20vw;
        height: 500px;
        display:block;
        background-color: #130E0A;
        position: relative;
        z-index: 1;
    }
    
    sidebar.fixed {
      position:fixed;
      left:20vw;
      top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
    <title>Controversy Study: The Four Color Theorem and Computational Proofs</title>
            <meta name='viewport' content='initial-scale=1.0'>
            <meta charset='utf-8'>
        </head>
        <body>
    <section id='header'></section>
    
            <section id='main'>
                <sidebar></sidebar>
                <div id='timeline' class='cd-container'></div>
            </section>
        </body>
    </html>

Answer 2

If you're familiar with jQuery, you can implement something like this:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     // Use >= instead of <=
    if (scroll >= 1000) {
        // Make sure to use "clearHeader" instead of "clearheader"
        $("sidebar").addClass("fixed");
    }
    else {
      $("sidebar").removeClass("fixed");
    }
}); // Don't forget to add the closing parentheses );

body {
  margin:0;
}

#header {
  width:100%;
  background-color:blue;
   height: 1000px;
}


#main {
        margin-left: 20vw;
        height:10000px;
    }
    
    sidebar {
        width: 20vw;
        height: 500px;
        display:block;
        background-color: #130E0A;
        position: relative;
        z-index: 1;
    }
    
    sidebar.fixed {
      position:fixed;
      left:20vw;
      top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
    <title>Controversy Study: The Four Color Theorem and Computational Proofs</title>
            <meta name='viewport' content='initial-scale=1.0'>
            <meta charset='utf-8'>
        </head>
        <body>
    <section id='header'></section>
    
            <section id='main'>
                <sidebar></sidebar>
                <div id='timeline' class='cd-container'></div>
            </section>
        </body>
    </html>

Answer 3

Answer №2

Take a look at this updated code. I've made some changes to adhere to HTML5 standards and adjusted the CSS. Hopefully, these modifications address your needs.

#main {
    margin-left: 20vw;
    height: 100vh;
}

header {
  width: 100%;
  height: 85px;
  background-color: red;
  padding: 20px;
  
}

#sidebar {
    width: 20vw;
    height: 100vh;
    background-color: #130E0A;
    position: fixed;
    left: 0.9vw;
    z-index: 1;
}

<header>
  I am the Header | Je suis le header.
</header>

<section id="main">
  <div id="sidebar">
    I am the sidebar | Je suis le sidebar.
  </div>
</section>

Answer 4

Take a look at this updated code. I've made some changes to adhere to HTML5 standards and adjusted the CSS. Hopefully, these modifications address your needs.

#main {
    margin-left: 20vw;
    height: 100vh;
}

header {
  width: 100%;
  height: 85px;
  background-color: red;
  padding: 20px;
  
}

#sidebar {
    width: 20vw;
    height: 100vh;
    background-color: #130E0A;
    position: fixed;
    left: 0.9vw;
    z-index: 1;
}

<header>
  I am the Header | Je suis le header.
</header>

<section id="main">
  <div id="sidebar">
    I am the sidebar | Je suis le sidebar.
  </div>
</section>

Answer 5

Answer №3

Below is a handy JavaScript solution that keeps track of your scrolling position and switches to fixed once you pass the header:

var sidebar = document.getElementById('sidebar');
window.addEventListener('scroll',function() {
  var st = document.body.scrollTop,
      mt = document.getElementById('main').offsetTop;
  if (st > mt) {
    sidebar.classList.add('fixed');
  } else {
    sidebar.classList.remove('fixed');
  }
})

body {
  margin: 0;
}

#main {
  height: 100vh;
  position: relative;
}

#header {
  background: red;
}

sidebar {
  background-color: #130E0A;
  width: 20vw;
  height: 100vh;
  font-size: 5em;
  color: white;
  position: absolute;
  top: 0; left: 0;
  overflow-y: scroll;
}

.fixed {
  position: fixed;
}

#timeline, sidebar {
  font-size: 5em;
}

#timeline {
  margin-left: 20vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Exploring Controversy: The Four Color Theorem and Computer Proofs</title>
  <meta name='viewport' content='initial-scale=1.0'>
  <meta charset='utf-8'>
</head>

<body>
  <section id='header' style='height: 100vh; margin: 0;'></section>

  <section id='main'>
    <sidebar id='sidebar'><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></sidebar>
    <div id='timeline' class='cd-container'><p>asdf</p></div>
  </section>
</body>

</html>

Answer 6

Below is a handy JavaScript solution that keeps track of your scrolling position and switches to fixed once you pass the header:

var sidebar = document.getElementById('sidebar');
window.addEventListener('scroll',function() {
  var st = document.body.scrollTop,
      mt = document.getElementById('main').offsetTop;
  if (st > mt) {
    sidebar.classList.add('fixed');
  } else {
    sidebar.classList.remove('fixed');
  }
})

body {
  margin: 0;
}

#main {
  height: 100vh;
  position: relative;
}

#header {
  background: red;
}

sidebar {
  background-color: #130E0A;
  width: 20vw;
  height: 100vh;
  font-size: 5em;
  color: white;
  position: absolute;
  top: 0; left: 0;
  overflow-y: scroll;
}

.fixed {
  position: fixed;
}

#timeline, sidebar {
  font-size: 5em;
}

#timeline {
  margin-left: 20vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Exploring Controversy: The Four Color Theorem and Computer Proofs</title>
  <meta name='viewport' content='initial-scale=1.0'>
  <meta charset='utf-8'>
</head>

<body>
  <section id='header' style='height: 100vh; margin: 0;'></section>

  <section id='main'>
    <sidebar id='sidebar'><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></sidebar>
    <div id='timeline' class='cd-container'><p>asdf</p></div>
  </section>
</body>

</html>

Sticky sidebar following a complete-page header

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS call to the web service

Arranging form elements and a map in a side-by-side layout using HTML5

showing a pair of divs in a split layout on the homepage

Guide for assigning a custom style class to a selection field in a Django form

The functionality of hover and custom attribute is not operational on IE8

AngularJS causing issues with page redirection functionality

What is the best method for accessing a value in IndexedDB while utilizing service workers?

R code for extracting data without using CSS path

What is the reason behind the CSS not rendering when async:false is used?

Can a custom spellchecking feature be integrated into an HTML textarea?

Steps for adding hover color to a div with linear gradient border

Animating content using CSS keyframes for dynamic changes

Adjust the padding when hovering using CSS

Tips for preserving the accuracy of data stored in database tables

Shrink Table Column Size with Bootstrap and Stylus to Optimize Space Usage

Ways to customize the appearance of a unique component

Prevent drag and drop functionality in QtWebkit

Modifying Stroke color in HTML5 Canvas

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

Slide the first div upward to display the text in the second div when hovering over the first div