Jump to content

Add sticky text block with fluid engine

Recommended Posts

Site URL: https://uxplaybook.org/ux-accelerator

Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046


How do I make this block stop at the footer?

  Quote

/* Text sticky */
@media screen and (min-width:768px) {
  .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 {
    position: sticky;
    top: 200px;
      position: -webkit-sticky;
    z-index: 999;
  }}

Edited by semigrownkid
Link to comment
4 hours ago, semigrownkid said:

Site URL: https://uxplaybook.org/ux-accelerator

Hello @tuanphan I need help making this block sticky (fluid engine) #block-yui_3_17_2_1_1664264642296_1491046


How do I make this block stop at the footer?

  Quote

/* Text sticky */
@media screen and (min-width:768px) {
  .fe-block.fe-block-yui_3_17_2_1_1664264642296_1491046 {
    position: sticky;
    top: 200px;
      position: -webkit-sticky;
    z-index: 999;
  }}

I check that it is set sticky within the current section. Do you need to set it fixed for entire page?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 months later...
On 1/13/2023 at 6:36 PM, couldbegood said:

Hello - did you manage to get the block to be fixed over the whole page (I am assuming multiple sections?

I can only get it to stick to one section

Thanks

If fixed whole page, I think you need to use position fixed not sticky

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/15/2023 at 9:27 AM, tuanphan said:

If fixed whole page, I think you need to use position fixed not sticky

This is the code I'm using in the page header:


#block-yui_3_17_2_1_1673604221221_17626{
    position: fixed;
    top: 40%;
    left: 96%;
    transform-origin: 100% 0;
    z-index: 9999;
  width: 40px;
}

But only appears for that section

unthinkable.squarespace.com

unthinkable

 

Thanks

 

 

Link to comment
On 1/19/2023 at 10:37 PM, couldbegood said:

This is the code I'm using in the page header:


#block-yui_3_17_2_1_1673604221221_17626{
    position: fixed;
    top: 40%;
    left: 96%;
    transform-origin: 100% 0;
    z-index: 9999;
  width: 40px;
}

But only appears for that section

unthinkable.squarespace.com

unthinkable

 

Thanks

 

 

Which page are you referring to? I don't see this block on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
  • 4 weeks later...

Hey @tuanphan , I tried this code:

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


for the following page (https://echostudio.co/about) where I'm trying to get the search bar and the table of contents box on the right to be fixed / sticky only when a user is scrolling through the "What Happens at ES" section 

Would appreciate it if you could help me out 🙂
 

Screen Shot 2023-05-18 at 2.24.06 PM.png

Edited by adrientharrison
Link to comment
On 5/19/2023 at 1:37 AM, adrientharrison said:

Hey @tuanphan , I tried this code:

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


for the following page (https://echostudio.co/about) where I'm trying to get the search bar and the table of contents box on the right to be fixed / sticky only when a user is scrolling through the "What Happens at ES" section 

Would appreciate it if you could help me out 🙂
 

Screen Shot 2023-05-18 at 2.24.06 PM.png

Use this new code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.