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

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>

Hi,

Which section/text you used sticky on above page?