Make text block sticky

Site URL: https://marlow-concept-zach-naum.squarespace.com/optical-frames

Hi there,

I'm wondering if anyone can help me make a text block on the side of a page sticky?

I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I've styled the text block using CSS, and I would like to add CSS to make it sticky so that it stays in place as you scroll down the page.

I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. 

Any help would be much appreciated!

On 2/15/2022 at 2:15 PM, SaniceMarlow said:

Site URL: https://marlow-concept-zach-naum.squarespace.com/optical-frames

Hi there,

I'm wondering if anyone can help me make a text block on the side of a page sticky?

I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I've styled the text block using CSS, and I would like to add CSS to make it sticky so that it stays in place as you scroll down the page.

I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. 

Any help would be much appreciated!

What is your site-wide password?

On 2/19/2022 at 2:41 AM, bangank36 said:

What is your site-wide password?

Whoops! Password: Willow123

12 hours ago, SaniceMarlow said:

Whoops! Password: Willow123

You can try

@media only screen and (min-width: 768px) {
  section[data-section-id="61dab313c56928309b50395b"] .sqs-layout  > .row >  .col:first-child {
    position: sticky;
    top: 200px;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you @bangank36, that worked! Sorry to be a pain, but if I wanted to move this the text block to the exact opposite side of the screen (far right), what would the edit to the code be?

Also, is there any way to have multiple stacked elements sticky in the same way? E.g. If I had a text block AND search block underneath.

Thank you!

On 3/4/2022 at 12:21 PM, SaniceMarlow said:

, that worked! Sorry to be a pain, but if I wanted to move this the text block to the exact opposite side of the screen (far right), what would the edit to the code be?

Also, is there any way to have multiple stacked elements sticky in the same way? E.g. If I had a text block AND search block underneath.

Thank you!

Have you solved it yet?

On 3/6/2022 at 10:16 PM, tuanphan said:

Have you solved it yet?

Nope not yet. 

Hi,
Website is expired!

Best,
Leopold

17 hours ago, IXStudio said:

Hi,
Website is expired!

Best,
Leopold

Just renewed it 🙂

23 hours ago, SaniceMarlow said:

Just renewed it 🙂

Add to Design > Custom CSS

/* Sticky text */
@media screen and (min-width:768px) {
div#page-section-61dab313c56928309b50395b .span-2 {
    position: sticky;
    position: -webkit-sticky;
    top: 200px;
}
}

Hi,

@tuanphan & @bangank36 Exact same request but I couldn't make it work with the code options above using my block IDs....

Could you please help me with the right code to make the green text block sticky as you scroll along that section? > https://www.soldesignstudio.com/test

Thanks,

Sarah

2 hours ago, SarahSWD said:

Hi,

 Exact same request but I couldn't make it work with the code options above using my block IDs....

Could you please help me with the right code to make the green text block sticky as you scroll along that section? > https://www.soldesignstudio.com/test

Thanks,

Sarah

With Fluid Engine, the code will be easier

Use this

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

3 hours ago, tuanphan said:

With Fluid Engine, the code will be easier

Use this

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

 

Awesome, thanks @tuanphan. I thought there might be a slight difference on Fluid.
It works just as I wanted. 🙂 

On 7/12/2022 at 1:59 AM, tuanphan said:

With Fluid Engine, the code will be easier

Use this

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

Hi @tuanphan

How would that work if you have a text block, button, accordion, etc on one side and want to stick all of them?

See this page: https://devmods.squarespace.com/template-scooter (pw: sneakpeek)

I could use @WillMyers solution as well but I got intrigued by your FE solution.

Thanks,

Roland

On 8/16/2022 at 1:51 AM, RolandFuseHub said:

Hi @tuanphan

How would that work if you have a text block, button, accordion, etc on one side and want to stick all of them?

See this page: https://devmods.squarespace.com/template-scooter (pw: sneakpeek)

I could use @WillMyers solution as well but I got intrigued by your FE solution.

Thanks,

Roland

I think you should move right image in separate section. Then you can use WillMyer Split section code & make left side sticky easier.

Or you can set sticky for all blocks, & adjust top value

something like this

@tuanphan I'm having a similar issue, and the previous css doesn't seem to work. I'd like to make the green section at the top sticky.

Right now, they're three separate text blocks, which may be part of the issue. Also, I wanted to make that text box multi-column so that it's all in one section, but I wasn't sure how to apply multi-column to just one text box.  

https://guacamoleairplane.com/supplier-guide-new (pw: newnew)

6 hours ago, KAC said:

@tuanphan I'm having a similar issue, and the previous css doesn't seem to work. I'd like to make the green section at the top sticky.

Right now, they're three separate text blocks, which may be part of the issue. Also, I wanted to make that text box multi-column so that it's all in one section, but I wasn't sure how to apply multi-column to just one text box.  

https://guacamoleairplane.com/supplier-guide-new (pw: newnew)

Add to Design > Custom CSS

@media screne and (min-width:641px) {
div#block-yui_3_17_2_1_1660788670895_121786+.row {
    position: sticky;
    top: 140px;
    z-index: 99999;
    position: -webkit-sticky;
}
}

I am ABSOLUTY confused. I am trying to do the same thing. There is no guild on how to actually embed the code. Iv add the code in the header, footer, the custom css and in the code block using css and html. nothing. what are you guys doing to make this work? what am i missing?

5 hours ago, VelocityMarketingGroup said:

I am ABSOLUTY confused.

The trick with sticky elements is that for something to be sticky it's parent element needs to be tall enough for the element you want to be stuck to stick in. If you don't have this relationship, then there is no way for position : sticky to work.

If this is the relationship then no sticky is possible.

If this is the relationship then a sticky is possible.

This is an oversimplification of a somewhat complex CSS issue for those new to CSS. When the relationship is right then the sticky element floats within the parent based on a number of CSS property value pairs.

I don't have a solution. If you want to read up on how sticky works there are many sources available on the web.

I figured it out. I was wondering how people were adding the CSS code and making a block in fe stick. I have the CSS code for forums but what I needed to do was add the block id into the code. I was able to find the block ID per the extension provided by squarespace id finder. 

My next big adventure is to figure out how to add an opacity to an image... If you know how, that would be great information.

Thanks,

On 8/24/2022 at 7:33 AM, VelocityMarketingGroup said:

I figured it out. I was wondering how people were adding the CSS code and making a block in fe stick. I have the CSS code for forums but what I needed to do was add the block id into the code. I was able to find the block ID per the extension provided by squarespace id finder. 

My next big adventure is to figure out how to add an opacity to an image... If you know how, that would be great information.

Thanks,

Which image are you referring to?

I have the same isssue. I'd like to make the text box that has daniela pestova and menu items   - portfolio, covers etc sticky. can you assist 

https://michael-terwindt-yk8j.squarespace.com/daniela-pestova-portfolio-1

On 9/12/2022 at 3:37 PM, themodelcoop said:

I have the same isssue. I'd like to make the text box that has daniela pestova and menu items   - portfolio, covers etc sticky. can you assist 

https://michael-terwindt-yk8j.squarespace.com/daniela-pestova-portfolio-1

 

It looks like you figured it out?

I'm really needing help with this. 

I upgraded the section of my sticky split accidentally to fluid. I obiously can't go back now. 
 

The sticky split no longer works. I had on the left sticky and on the right it scrolled 

What do i do? 

https://pece.squarespace.com/config/

7 hours ago, ellyferguson0 said:

I'm really needing help with this. 

I upgraded the section of my sticky split accidentally to fluid. I obiously can't go back now. 
 

The sticky split no longer works. I had on the left sticky and on the right it scrolled 

What do i do? 

 

https://pece.squarespace.com/config/

What is access password?