Jump to content

Split Sticky Sections

Recommended Posts

Im using a Brine template, I haven't built out the page yet, but I would like it to be exactly as the reference site, which I believe is split blocks and then use of the sticky javascript but I cant find a code injection to help me anywhere that works within the sqaurespace platform.

Link to comment
  • 4 months later...

Hi there! Adding to this conversation because I'm also interested in how to code sticky sections like the one cited above. I'm using 7.1 and have a similar look on my about page that I split into 1/2 sections, but it doesn't force a scroll. Your mouse has to be over the neutral color area on the right side to scroll through the "what does selah mean?" section.

Any ideas? @ecweb @tuanphan

 

Link to comment
  • 3 weeks later...
On 10/16/2020 at 9:14 PM, HaleyWard said:

Hi there! Adding to this conversation because I'm also interested in how to code sticky sections like the one cited above. I'm using 7.1 and have a similar look on my about page that I split into 1/2 sections, but it doesn't force a scroll. Your mouse has to be over the neutral color area on the right side to scroll through the "what does selah mean?" section.

Any ideas? @ecweb @tuanphan

 

This is also an interesting topic for me too! I actually made a plugin for my client site as

Charlie Edmiston Paintings — 2020 — Charlie Edmiston Studio

So for specific section I can suggest you do following to apply as hotfix, if you need a universal method let's pm me

1. Remove background of section, instead create a span-6 solumn and add the image block on the right of your text

2. Remove the margin and padding of section, make it 100% width

3. Use Css sticky to apply effect

Output: http://beyondspace.tk/wp-content/uploads/2020/11/sticky.gif

section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper {
        padding: 0;
        margin: 0;
        max-width: unset;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content {
  width: 100% !important;
}
/* Assume you got span-6 image column added*/
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: calc(6vw + 29px);
}
/* I want to make sure image is shorter than content */
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure > div {
    padding-bottom: 50% !important;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure img {
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...
8 hours ago, ocpl said:

HI I am also interested to know how to make 1 of 2 columns sticky when you scroll the other up to the end. I will be on 7.1 template Beaumont. Many thanx

pls show your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
10 hours ago, ocpl said:

Thank you Bangank but I am still in the process of tuning it. I would exactly what we can find there : https://readcereal.com/fan-ho/

looks great, let share your site once it ready

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 weeks later...
On 11/4/2020 at 5:27 PM, bangank36 said:

This is also an interesting topic for me too! I actually made a plugin for my client site as

Charlie Edmiston Paintings — 2020 — Charlie Edmiston Studio

So for specific section I can suggest you do following to apply as hotfix, if you need a universal method let's pm me

1. Remove background of section, instead create a span-6 solumn and add the image block on the right of your text

2. Remove the margin and padding of section, make it 100% width

3. Use Css sticky to apply effect

Output: http://beyondspace.tk/wp-content/uploads/2020/11/sticky.gif


section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper {
        padding: 0;
        margin: 0;
        max-width: unset;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content {
  width: 100% !important;
}
/* Assume you got span-6 image column added*/
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: calc(6vw + 29px);
}
/* I want to make sure image is shorter than content */
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure > div {
    padding-bottom: 50% !important;
}
section[data-section-id="5ebdbd0ce45b605e7b5758b0"] .content-wrapper .content [data-type="page-section"] > .row .span-6:first-child .sqs-block-image-figure img {
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

 

Hi @bangank36

I am trying to create a similar sticky item to the one you have create here: https://www.charliee.com/paintings/2020 

Would you be able to explain how I might be able to get my left column on this page to be sticky (and stay at the top) whilst scrolling through the series of works (photos and text on right)?

I have tried playing around with the code you have provided here but haven't been had any luck with getting it to stick.

https://apricots-accordion-t856.squarespace.com/

Pword: enter

 

Thanks in advance if you have a moment to help with this. 

Sam

Link to comment
11 minutes ago, longleys said:

Hi @bangank36

I am trying to create a similar sticky item to the one you have create here: https://www.charliee.com/paintings/2020 

Would you be able to explain how I might be able to get my left column on this page to be sticky (and stay at the top) whilst scrolling through the series of works (photos and text on right)?

I have tried playing around with the code you have provided here but haven't been had any luck with getting it to stick.

https://apricots-accordion-t856.squarespace.com/

Pword: enter

 

Thanks in advance if you have a moment to help with this. 

Sam

Which page you are referring to, the page is short

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

18 minutes ago, longleys said:

Hi @bangank36

I am trying to create a similar sticky item to the one you have create here: https://www.charliee.com/paintings/2020 

Would you be able to explain how I might be able to get my left column on this page to be sticky (and stay at the top) whilst scrolling through the series of works (photos and text on right)?

I have tried playing around with the code you have provided here but haven't been had any luck with getting it to stick.

https://apricots-accordion-t856.squarespace.com/

Pword: enter

 

Thanks in advance if you have a moment to help with this. 

Sam

I guess this is the section

#block-a0af2ddfbedc190ef2c1 .intrinsic {
  position: sticky;
    top: 100px;
   height: 200px;
}

Reference

How To Create a Sticky Element (w3schools.com)

image.png.6b200608455905398a85433f66908440.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
14 hours ago, longleys said:

Hi @bangank36

I am trying to create a similar sticky item to the one you have create here: https://www.charliee.com/paintings/2020 

Would you be able to explain how I might be able to get my left column on this page to be sticky (and stay at the top) whilst scrolling through the series of works (photos and text on right)?

I have tried playing around with the code you have provided here but haven't been had any luck with getting it to stick.

https://apricots-accordion-t856.squarespace.com/

Pword: enter

 

Thanks in advance if you have a moment to help with this. 

Sam

Thanks @bangank36

Sorry I forgot the actual page. It's this one: https://apricots-accordion-t856.squarespace.com/work/foundation

 

Thanks again

Shaya 

Link to comment
5 hours ago, longleys said:

Thanks @bangank36

Sorry I forgot the actual page. It's this one: https://apricots-accordion-t856.squarespace.com/work/foundation

 

Thanks again

Shaya 

it's tricky with pure css, so I have to inspect the correct col

@media only screen and (min-width: 768px) {
      section[data-section-id="5fd3000d61e42a1f6caebb3a"] .content > .sqs-layout .row .row .span-4 {
        position: sticky;
          top: 150px;  
      }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...
2 hours ago, vvc said:

@bangank36Do you mind helping me with a section on my site I want to make sticky?

This is the section I want to make sticky, 2 images on one side, texts/small logos on other. I've tried to change the section ID and made 6 columns, but still not working. What am I doing wrong? Thank you!

 

SITE URL: https://orb-plane-ft2t.squarespace.com/ PW: elyssa

Screen Shot 2021-01-07 at 3.39.41 PM.png

Try

@media only screen and (min-width: 768px) {
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout .row .span-1,
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout .row .span-4 {
        position: sticky;
          top: 25px;  
      }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
5 minutes ago, vvc said:

Just tried it, nothing changed! How should my spacer blocks be set up? Does that affect it?

 

image.thumb.png.38dde3cb3869dd72d3690455bb8ba426.png

You just changed your column with again

@media only screen and (min-width: 768px) {
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout .row .span-2,
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout .row .span-4 {
        position: sticky;
          top: 25px;  
      }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I know!! I'm sorry 😞 I was just trying to figure out what the column width would be for the code to work.

 

But the new code is still not working, any ideas? What do I have to do in order to have the images on the left stick??

Link to comment
1 hour ago, vvc said:

I know!! I'm sorry 😞 I was just trying to figure out what the column width would be for the code to work.

 

But the new code is still not working, any ideas? What do I have to do in order to have the images on the left stick??

Lol it always work like the screenshot I sent, but you switch the layout, let me check

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36 Let me know if there is a layout that is easiest. I don't quite understand the code, especially 

.sqs-layout .row .span-2

and

 

.sqs-layout .row .span-4

 

Do you mind explaining to me what they mean?

 

Right now I have 5 overall spacer blocks spread across, and mini spacer blocks underneath the 3rd spacer blocks to make the logos smaller.812202429_ScreenShot2021-01-07at7_33_36PM.thumb.png.316114f2ec6a7aabe77893b40dba0005.png

Edited by vvc
Link to comment
3 minutes ago, vvc said:

@bangank36 Let me know if there is a layout that is easiest. I don't quite understand the code, especially 


.sqs-layout .row .span-2

and

 


.sqs-layout .row .span-4

 

Do you mind explaining to me what they mean?

 

Right now I have 5 overall spacer blocks spread across, and mini spacer blocks underneath the 3rd spacer blocks to make the logos smaller.812202429_ScreenShot2021-01-07at7_33_36PM.thumb.png.316114f2ec6a7aabe77893b40dba0005.png

they are the css selector, name of the column in html, but they wont work anymore, I will figure a way out

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@bangank36 Thank you, that's what I figured.

Would it be easier if we made the "background" sticky rather than the code blocks sticky?

So I have this code in another section that automatically splits the screen and makes the background image 50%:

 

section[data-section-id="5fe8fd485e66733f024138be"] {
  background-color:#fff;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
    
  }
  @media(max-width:767px){
    display:flex;
    flex-direction:column;
    .section-background, .content-wrapper{
      position:relative;
    }
    .content-wrapper{
      order: 1
    }
    .section-background{
      height:200px;
      order: 2;
    }
  }
}

 

Thank you so much for your help!

Link to comment
2 hours ago, vvc said:

@bangank36 Thank you, that's what I figured.

Would it be easier if we made the "background" sticky rather than the code blocks sticky?

So I have this code in another section that automatically splits the screen and makes the background image 50%:

 

section[data-section-id="5fe8fd485e66733f024138be"] {
  background-color:#fff;
  @media(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
    
  }
  @media(max-width:767px){
    display:flex;
    flex-direction:column;
    .section-background, .content-wrapper{
      position:relative;
    }
    .content-wrapper{
      order: 1
    }
    .section-background{
      height:200px;
      order: 2;
    }
  }
}

 

Thank you so much for your help!

The sticky css requires the container overflow: visible, I saw you had a overflow-x: hidden in parent, therefore not working, try to replace the code provided with this snippet

@media only screen and (min-width: 768px) {
      #page {
        overflow-x: visible;
      }    
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout > .row .col:nth-child(1){
          position: sticky;
          top: 25px;  
      }
      section[data-section-id="5fe8e0079151d82f6a094c5d"] .content > .sqs-layout > .row .col:nth-child(2){
          position: sticky;
          top: 25px;  
      }
}

the nth-child(1) and nth-child(2)  indicated that first 2 column should be sticky

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.