Jump to content

Make text block sticky

Recommended Posts

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!

image.thumb.png.fe8aa9e489d2f852217da7bc0a713f6c.png

Link to comment
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!

image.thumb.png.fe8aa9e489d2f852217da7bc0a713f6c.png

What is your site-wide password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

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!

Link to comment
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?

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
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;
}
}

 

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
  • 3 months later...
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;
}
}

 

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
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. 🙂 

 

Link to comment
  • 1 month later...
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,

Rolandimage.thumb.jpeg.f346f934373fe09b1c1c7ba189ef6162.jpeg

Edited by RolandFuseHub

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
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,

Rolandimage.thumb.jpeg.f346f934373fe09b1c1c7ba189ef6162.jpeg

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

image.thumb.png.1698a907a2de179f6907faa3918dce84.png

something like this

image.thumb.png.35086777338890a6d0a204d800bd56d1.png

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

@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)

Screen Shot 2022-08-17 at 7.38.13 PM.png

Link to comment
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)

Screen Shot 2022-08-17 at 7.38.13 PM.png

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;
}
}

 

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
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.

1439251891_nostickypossible.png.8532253037381a1f078665963a320b94.png

If this is the relationship then a sticky is possible.

156988852_yesstickypossible.thumb.png.e7df73153645ef1e631b0a6c4d403255.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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,

Link to comment
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?

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
  • 3 weeks later...
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?

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
  • 2 weeks later...
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?

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.