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!

Hi @tuanphan, can you please give me code for how to make a section sticky in the Fluid Engine?

Thanks,

Nick

On 4/11/2023 at 12:04 AM, Bobface said:

Hi @tuanphan, can you please give me code for how to make a section sticky in the Fluid Engine?

 

Thanks,

 

Nick

If you share link to page, we can check easier

The site hasn't been published yet, I'm not sure how to share the page with you. 

On 4/14/2023 at 12:43 AM, Bobface said:

The site hasn't been published yet, I'm not sure how to share the page with you. 

You can follow this

https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

Thanks. Here is the link to the page: https://kumquat-roadrunner-8lpn.squarespace.com/winter-22-23

pw: skagitunfinished

On 4/22/2023 at 5:41 AM, Bobface said:

Thanks. Here is the link to the page: https://kumquat-roadrunner-8lpn.squarespace.com/winter-22-23

pw: skagitunfinished

Thank you. Which section do you want to sticky?

The top section with the audio tracks, so that it can scroll like a sidebar while you scroll down the page. If needed, I can make it horizontal so that it remains at the top or bottom of the page while you scroll, but the side would be best.

23 hours ago, Bobface said:

The top section with the audio tracks, so that it can scroll like a sidebar while you scroll down the page. If needed, I can make it horizontal so that it remains at the top or bottom of the page while you scroll, but the side would be best.

Add to Design > Custom CSS

[data-section-id="64343c60ec50bd7521d3c01a"] {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}

That doesn't seem to be working for me.

Nevermind it does seem to be working, just have to tweak it some. Thank you!

Hi @tuanphan, this looks great, the only problem is that if I want to have it be in a sidebar format, the background of the section then covers other sections as you scroll down. Is there anyway to make that background transparent so it's just the audio files on the side that are sticky, and not a semi-transparent background covering everything as well?

By the way, this is the new page link: https://kumquat-roadrunner-8lpn.squarespace.com/winter22

Also, is there a way to only make it sticky on desktop and not mobile? On mobile it ends up covering most of the page even if I make it horizontal.

Thanks!

On 5/3/2023 at 11:09 PM, Bobface said:

By the way, this is the new page link: https://kumquat-roadrunner-8lpn.squarespace.com/winter22

Also, is there a way to only make it sticky on desktop and not mobile? On mobile it ends up covering most of the page even if I make it horizontal.

Thanks!

The url doesn't work

To make code run on desktop only, just wrap code in query

@media screen and (min-width:992px) {
[data-section-id="64343c60ec50bd7521d3c01a"] {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}
}

I'm also trying to make an image sticky for my website. I would like the image on the left of the table, #block-yui_3_17_2_1_1684263152617_15612 to be sticky, but I can't seem to figure this CSS out. Wondering if you could help? @tiuanphan

Here is the link: https://www.cvwellbeing.com/nutrition-counseling-2

On 5/17/2023 at 4:05 AM, aliswigg said:

I'm also trying to make an image sticky for my website. I would like the image on the left of the table, #block-yui_3_17_2_1_1684263152617_15612 to be sticky, but I can't seem to figure this CSS out. Wondering if you could help? @tiuanphan

Here is the link: https://www.cvwellbeing.com/nutrition-counseling-2

 

You mean this image?

On 5/19/2023 at 11:15 PM, tuanphan said:

You mean this image?

@tuanphanYes, this is the one!

I'm trying to make the sections of my page to overlay the first section as in this example https://www.onlyanother.co/home. Tried a bunch of codes but it didn't work. Can someone help me?

https://primrose-clover-nw59.squarespace.com/
password: backandforth

On 8/21/2023 at 5:47 PM, aln2023 said:

I'm trying to make the sections of my page to overlay the first section as in this example https://www.onlyanother.co/home. Tried a bunch of codes but it didn't work. Can someone help me?

 

https://primrose-clover-nw59.squarespace.com/
password: backandforth

 

You mean first section will be fixed, and other section will be scroll over first section?

yes, exactly ! 

Try this CSS code

body.homepage article section {
        position: -moz-sticky !important;
        position: -ms-sticky !important;
        position: -o-sticky !important;
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0;
        background: none !important;
}
main#page {
    overflow: visible !important;
}