Jump to content

Need help making an element sticky

Recommended Posts

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!

 

sq_sticky_issue.png

Edited by tddrchrdsn
Errors in code
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.