Sticky section on scroll (can't remember how I did this, now I can't recreate it!)

Site URL: https://www.poornilindenfeld.com/

Hi there,

I'm working on a sight with a series of split sections with an image on one side and a text block on the other. I decided to search for some custom CSS to make the image blocks sticky on scroll. I found some CSS online and tried it on my sight and everything worked fine.

Flash forward two or three weeks: I have added another split section which needs the same CSS applied to it. But now I can't figure out how I managed to do it before.

Here's the code already in place:

#page-section-622dffcc6ac2e8678da6b0d9 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-628f23c854ede010df2681f3 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-626908847683d664da730e01 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-626926c186dffd7e48f3cae3 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-626926c186dffd7e48f3cae5 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-626926c186dffd7e48f3cae7 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-626926c186dffd7e48f3cae9 .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}
#page-section-622de5a4e3e56b3665bcd5ce .sqs-col-12 .sqs-col-5 {
  top: 34px;
  position: -webkit-sticky;
  position: sticky;
}

It seems simple enough, but now I can't seem to find the "#page-section" ID for the new section. All I can find is the "#block-yui" or "#collection" ID or whatever. Did my ID finder extension change somehow? I'm at a total loss here. Any advice would be great!

site link: www.poornilindenfeld.com

pw: saith

I see sticky sections work fine here. Did you solve this?

You can use [data-section-id] instead. It is similar with #page-id.

The ID Finder Tool will show data-section-id. As far as I know it can't find #page-section-id.

I managed to get it to work a few weeks back, but now I have just one new section where I need to replicate the effect (see the home page, under where it says "Therapy For...").

I can't figure out how to replicate it though. I've tried using [data-section-id], but to no avail.

Maybe I'm typing it incorrectly? I'm pretty clueless with CSS to be fair.

16 hours ago, saithstudio said:

I managed to get it to work a few weeks back, but now I have just one new section where I need to replicate the effect (see the home page, under where it says "Therapy For...").

I can't figure out how to replicate it though. I've tried using [data-section-id], but to no avail.

Maybe I'm typing it incorrectly? I'm pretty clueless with CSS to be fair.

Use this

div#page-section-628f23c854ede010df2681f3 .span-5 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}
section, article, #page, body {
    overflow: visible !important;
}

YES! That works! Thank you so much!