fixed sticky Text

Site URL: https://mika.squarespace.com/projekt-am-hang

Hello Community,

hope someone can help me, please...

I want to make a fixed text section so I can scroll down the pictures on left and text on the right is fixed.
Is there any CSS Code to fix that on several pages

https://mika.squarespace.com/projekt-am-hang

PW: mika

Add to Design > Custom CSS

/* sticky text */
@media screen and (min-width:641px) {
div#page-5fe123c95991c06291e62c69 .col.sqs-col-6.span-6:nth-child(2) {
    position: sticky;
    top: 220px;
}
}

THNAK YOU SOOOOO MUCH!

@tuanphan I would like to do the same with all blog pages they are under the url /work

Here's an example: https://thevisualbrand.squarespace.com/work/altos-tequila

Password: tvb

I would like the title & description to be sticky.

On 2/26/2021 at 3:35 AM, TVB said:

@tuanphan I would like to do the same with all blog pages they are under the url /work

Here's an example: https://thevisualbrand.squarespace.com/work/altos-tequila

Password: tvb

I would like the title & description to be sticky.

You mean ALTOS TEQUILA text column?

yes @tuanphan the altos tequila text box, the title and description text.

Add to Design > Custom CSS

/* sticky text */
@media screen and (min-width:768px) {
.blog-item-top-wrapper {
    position: sticky;
    top: 100px;
}
}

Hi tuanphan,

I was hoping to do the same to the text block and the code block on my page:

https://www.ladigin.com/test

Password: lvg

9 hours ago, gvlgvl said:

Hi tuanphan,

I was hoping to do the same to the text block and the code block on my page:

https://www.ladigin.com/test

Password: lvg

 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#page-section-60ae8fc115eeae708ef70df3>.row>.span-5 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

On 5/28/2021 at 7:36 AM, tuanphan said:

 

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#page-section-60ae8fc115eeae708ef70df3>.row>.span-5 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

 

That did it, thank you!

Hi tuanphan,

I was hoping to do the same to the text block and the code block on my page:

https://naomibhalla.com/website-redesign

15 hours ago, naomibhalla said:

Hi tuanphan,

I was hoping to do the same to the text block and the code block on my page:

https://naomibhalla.com/website-redesign

 

It looks like you solved this?

Hi @tuanphan

I am trying to have a column be sticky only in its section. I tried your CSS codes above (Changed the block id). But it doesn't work. I am also trying to create a secondary navigation bar the sticks to the top of the page. The links are anchor links for the same page. 

Appreciate if you could help me please. 

Thanks 

Sina  

On 9/23/2021 at 8:43 PM, SINAA said:

Hi @tuanphan

I am trying to have a column be sticky only in its section. I tried your CSS codes above (Changed the block id). But it doesn't work. I am also trying to create a secondary navigation bar the sticks to the top of the page. The links are anchor links for the same page. 

Appreciate if you could help me please. 

Thanks 

Sina  

Can you share page url?

20 hours ago, tuanphan said:

Can you share page url?

www.lnkn.co.uk

On 9/26/2021 at 3:43 AM, SINAA said:

www.lnkn.co.uk

Hi,

Which element you want to make sticky?

Hey @tuanphan It's amazing how you make it easy.
Can you share why do you use each code ? I would like to understand to do the same for my case here : 

Hi @tuanphan Can you tell me how I can make the text on the left side of the page stay fixed as the user scrolls through the images on the right? 

https://emilymullaney.work/new-page-70

Thank you!!

@greenbaby12

Add the following to Design > Custom CSS.

#page-618697982a9ea677d6d16831 > .sqs-row > .sqs-col-5 {

  position : sticky;
  top : 109px;
  
  }

This is for v7.0 using the York template family and specific to the poster's need.

Let us know how it goes.

@tuanphan I have a few pages (around 20 - 25 total) that I'm trying to format similarly – a few short sentences in a sticky paragraph on the left, and scrolling gallery on the right. Is there a standard line of code that applies to all pages, or does it need to be specific to each?

https://www.trippclemens.com/ppfa

On 11/12/2021 at 9:16 AM, trippstagram said:

@tuanphan I have a few pages (around 20 - 25 total) that I'm trying to format similarly – a few short sentences in a sticky paragraph on the left, and scrolling gallery on the right. Is there a standard line of code that applies to all pages, or does it need to be specific to each?

 

https://www.trippclemens.com/ppfa

 

 

Answered your message

Hello @tuanphan,

I would like to keep the block fixed once I scroll past this section of the webpage.

Could you advise?

@keongxq

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 2/9/2022 at 11:31 AM, Chakman said:

Hello @tuanphan

 

I would like to keep the left-hand side block fixed while the right-hand side content keep scrolling down.

Any advise? Many many thanks 🙏

public url: https://www.chakmandesign.com/about
Att.

Add to Design > Custom CSS

/* sticky resume */
@media screen and (min-width:992px) {
div#page-section-620338e4aacdac0d19037599 .span-5 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

@tuanphan

Could you help me? I'm looking to do something similar on an index page sub page #farm-intro, trying to make the the left column (with the FARMING PRACTICES, COMPOST, REDUCED TILL, CROP ROTATION, BIODIVERSITY) sticky within the subpage, and also highlighted somehow (darker color or bigger font size) as one scrolls down past the section on right column. 

I tried to do it myself but it's not working... 😥

Thank you!!