Jump to content

Sticky block on post

Recommended Posts

Hello, 

I'm trying to create a sticky block on a post page - does anyone know if it's possible?

Here's a basic post page: 
https://fyshwick-markets.squarespace.com/the-latest/flower-care-101
password: fyshwick

I'm wanting the image slider to stay sticky (fixed) while the content on the left moves as you scroll. Is there a way to achieve this? Ideally, I also want to be able to duplicate this 'post' for different posts, so I don't want to target the specific block ID if possible?

Thanks!

Sticky-Block.jpg

Link to comment

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
45 minutes ago, holahannah said:

Thank you so much! That's perfect, looks like it will sort out exactly what I'm aiming to do. Appreciate it!

Excellent!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...
5 hours ago, ShortAngryViking said:

@Ziggy I tried following along with Will. But am I missing something?

https://www.wagthedog.nz/comprehensive-dog-grooming-services


The code is at the very top of the (CSS) window

 

It will not work on Fluid Engine

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
10 minutes ago, Web_Solutions said:

It will not work on Fluid Engine

Just to expound a bit. There are two types of page section editors in v7.1. Classic Editor and Fluid Editor. Most folks who are recently editing their site are getting Fluid Editor sections. If you are a Circle Member your options are more flexible, currently.

Use your Circle power and check out your options.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

thanks @creedon and @Web_Solutions

I have created a new classic editor section: copy and pasted the info where I like it. 

Works. But there is a question I didn't anticipate. How do I add the code block in Classic editor? I am used to Fluid Engine 

do I need to use a markdown block and put H1 H2 and H3 with P2 formatting? or is there an easier way?

 

Edited by ShortAngryViking
Link to comment
41 minutes ago, ShortAngryViking said:

How do I add the code block in Classic editor? I am used to Fluid Engine 

Both types of editors have code blocks. In Classic Editor there are insertion points. You hover over the edges of blocks and you can insert more blocks by clicking on the plus. It's the same technique you'd use to edit a blog post, event, or store product Additional Info.

You can or course read up on the Classic Editor and how it works online.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, ShortAngryViking said:

thanks @creedon and @Web_Solutions

I have created a new classic editor section: copy and pasted the info where I like it. 

Works. But there is a question I didn't anticipate. How do I add the code block in Classic editor? I am used to Fluid Engine 

do I need to use a markdown block and put H1 H2 and H3 with P2 formatting? or is there an easier way?

 

For better understand 

Screenshot_281.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Hi everyone, 

I got this to work nicely using the tutorial @Ziggy suggested (thank you!). 

https://fyshwick-markets.squarespace.com/the-latest/flower-care-101
password: fg

Does anyone know if it's possible to just make the title text block sticky as well? So the paragraph text basically scrolls behind the title? 

I also wanted to cap the height of the scrolling left column text - ideally i don't want the text to extend further than the image on the right, is there a way to hide overflow here? I've attached a screenshot for reference. 

Thanks

Flower-Care-101.jpg

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.