Jump to content

Using position sticky for a fixed element, but it stops working after new section.

Recommended Posts

Hi there, 

 

i'm trying to have a fixed element scrolling down the page, but i want it to scroll a little first before it sticks. Its working fine on the first section of the page, but as soon as a new section starts the position sticky stops working.  Does anyone have any thoughts? I'd like it to stay fixed all the way to the bottom. 

 

code I am using...

Any help greatly appreciated!

 

/*class applied to my image in my code block*/
.sticky {
  width: 9vw;
  height: 9vw;  
  z-index: 1;
  position: absolute;
  right: 0 !important;
  transform: translateY(34px)!important;
}

/*class applied to code block itself*/
#block-yui_3_17_2_1_1623840361986_4088 {
  position: sticky;
  top: 0;
  z-index: 1;
}
  
<!-- within my custom code block -->

<div id="logo" class="sticky">
  <img  src="https://static1.squarespace.com/static/60c07faed502261d79b77ba9/t/60c9d5fdf2f4804c9b8d1e98/1623840253861/TCG+roundel+black-01.png"></div>

 

Edited by LauraF101
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.