Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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.

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

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.

Link to comment
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;
}

 

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

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.