Add sticky text block with fluid engine

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

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?

7 hours ago, bangank36 said:

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

Yes please. It needs to be fixed until the footer (but not for anything above it)

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

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

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

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

On 1/26/2023 at 8:02 AM, tuanphan said:

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

Thanks but I decided to just use the header button and have it fixed and hide the logo on scroll

@tuanphan Do you know how I could get the first section to stick to the top (heading + graphic) and the blog below scrolling through while the heading stays?

I tried the code in this thread but can't seem to identify the correct ID or class selector. Thanks for you help if you have a minute.

site: https://hmna.squarespace.com/news
pw: macadamia

Add to Design > Custom CSS

@media screen and (min-width:768px) {
[data-section-id="6440e1c28a8cbf7010a655b8"] {
    position: sticky;
    top: 0;
    z-index: 99999;
}
}

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 🙂
 

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 🙂
 

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