Need help making an element sticky

Site URL: https://anxioussound.com/aoty-2020-2

Hello,

I'm using the Foster template in V7.

I have a page with two columns: 25% 75% 

The left column contains a div I would like to make sticky (sticks to the top of the browser window on scroll). Here is the HTML:

<div class="aoty-yr-container">
  <div class="aoty-yr sticky">
        <h1>
          2020
    </h1>
      <h2>
       The past is full of dead men /
The future is a cruelty
      </h2>
        <p>
          Protomartyr
        </p>
    </div>
    </div>

Here is the CSS: 

.aoty-yr-container {
  overflow: visible!important;
  background: pink;
  height: 2000px;
}
.aoty-yr {
  height: auto;
}
.aoty-yr h2 {
  padding-top: 40px!important;
  height: auto;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background: wheat;
}

Two issues here:

1. I need the left column — .aoty-yr-container (pink background) — to be the same height as the column on the right (the 2000px height was an arbitrary choice to make sure the sticky element's parent container had a height value). How can I achieve this? 

2. I've been unable to get the .sticky element to work — .aoty-yr sticky (wheat background). Any assistance would be greatly appreciated.

Note: Eventually, this page will become one of several within an index, each with a similar code block that will stick depending on scroll position. 

Thanks in advance!

Hi. Try adidng to Design > Custom CSS
 

/* Sticky element */
@media screen and (min-width:901px) {
div#page-6065aaf17d413f5b90139ca0 .span-3 {
    position: fixed;
    top: 30px;
    z-index: 999;
}
div#page-6065aaf17d413f5b90139ca0 .span-9 {
    margin-left: 25%;
}
}

6 hours ago, tuanphan said:

Hi. Try adidng to Design > Custom CSS
 

/* Sticky element */
@media screen and (min-width:901px) {
div#page-6065aaf17d413f5b90139ca0 .span-3 {
    position: fixed;
    top: 30px;
    z-index: 999;
}
div#page-6065aaf17d413f5b90139ca0 .span-9 {
    margin-left: 25%;
}
}

 

Thanks for the reply. A fixed position won't work in this scenario, since I need the header for each individual page in the index to stick based on scroll position (see my note at the bottom of my post). 

To make this more clear, I added the page to an index: https://anxioussound.com/aoty2

I'd like the 2020 header (left column) to stick when viewing the 2020 page content, and the 2019 header to stick when the scroll position reaches the 2019 page content.