Jump to content

Create sticky sidebar with CSS

Recommended Posts

I am working on a portal update page for a client and would like to know if there's any easier way to create a simple sidebar using a group of blocks. 

I have currently created a look I really like and the blocks are sticky, however this is not responsive so when the browser size changes on desktop the blocks are skewed.

Is there better CSS I can use to keep the blocks in the same position regardless of browser size?

Site - https://brontegroup.com.au/solai-buyers-update-portal

Screenshot 2024-03-19 at 4.35.29 pm.png

Link to comment
  • Replies 5
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
Posted (edited)
On 3/21/2024 at 7:46 PM, tuanphan said:

Responsive

What is your problem? Can you describe in more detail? We can check easier

Apologies – I am trying to see if it's possible to have the sidebar on this page be responsive in the sense that every time the browser changes whether that be from a desktop to smaller desktop, or tablet to mobile, the sidebar parameters break and the elements move outside the shape block underneath. 

Is there any css that would make this group of blocks stay in the same position regardless of browser size?  E.g. can the 'px' values be something responsive instead of fixed values?

This is what I currently have: 

 body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710823748951_2234 {
  position: sticky;
  top: 55px;
 }

 body:not(.sqs-edit-mode-active) .fe-block.fe-block-yui_3_17_2_1_1710820931793_13230 {
  position: sticky;
  top: 100px;
 }

 body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_31196 {
  position: sticky;
  top: 700px;
 }

 body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_29051 {
  position: sticky;
  top: 740px;
 }

 

Edited by raego
Link to comment
On 4/5/2024 at 9:07 PM, tuanphan said:

I think you can code this with HTML/CSS in Code Block. If you want this, I will try convert it to HTML code in Code Block

image.thumb.png.a748382807e4ad0f4c4ffbcb58790c43.png

That would be great if possible - thank you so much!

Please note the text under each heading will be an anchor link to different sections on the page (these will change as each stage progresses).

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.