ecweb Posted June 5, 2020 Share Posted June 5, 2020 Hello I would like to create a split section and so one side sticks as I scroll, does anyone have any idea how to create this? Example: https://nayatraveler.squarespace.com/journeys-peru-walking Thank you Link to comment
tuanphan Posted June 8, 2020 Share Posted June 8, 2020 Which template will you use? or Can you share link to page where you apply this effect? 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
ecweb Posted June 10, 2020 Author Share Posted June 10, 2020 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. Beyondspace 1 Link to comment
HaleyWard Posted October 16, 2020 Share Posted October 16, 2020 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 Beyondspace 1 Link to comment
Beyondspace Posted November 4, 2020 Share Posted November 4, 2020 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; } tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
ocpl Posted November 20, 2020 Share Posted November 20, 2020 (edited) 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 Edited November 20, 2020 by ocpl Beyondspace 1 Link to comment
Beyondspace Posted November 21, 2020 Share Posted November 21, 2020 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
ocpl Posted November 23, 2020 Share Posted November 23, 2020 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/ Link to comment
Beyondspace Posted November 24, 2020 Share Posted November 24, 2020 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
longleys Posted December 16, 2020 Share Posted December 16, 2020 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
Beyondspace Posted December 16, 2020 Share Posted December 16, 2020 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
Beyondspace Posted December 16, 2020 Share Posted December 16, 2020 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) BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
longleys Posted December 16, 2020 Share Posted December 16, 2020 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 Beyondspace 1 Link to comment
Beyondspace Posted December 17, 2020 Share Posted December 17, 2020 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 7, 2021 Share Posted January 7, 2021 @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 Beyondspace 1 Link to comment
Beyondspace Posted January 7, 2021 Share Posted January 7, 2021 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 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 7, 2021 Share Posted January 7, 2021 Just tried it, nothing changed! How should my spacer blocks be set up? Does that affect it? Beyondspace 1 Link to comment
Beyondspace Posted January 7, 2021 Share Posted January 7, 2021 5 minutes ago, vvc said: Just tried it, nothing changed! How should my spacer blocks be set up? Does that affect it? 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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 7, 2021 Share Posted January 7, 2021 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
Beyondspace Posted January 8, 2021 Share Posted January 8, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 8, 2021 Share Posted January 8, 2021 (edited) @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. Edited January 8, 2021 by vvc Beyondspace 1 Link to comment
Beyondspace Posted January 8, 2021 Share Posted January 8, 2021 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. they are the css selector, name of the column in html, but they wont work anymore, I will figure a way out BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 8, 2021 Share Posted January 8, 2021 @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! Beyondspace 1 Link to comment
Beyondspace Posted January 8, 2021 Share Posted January 8, 2021 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 vvc and Webswool 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
vvc Posted January 8, 2021 Share Posted January 8, 2021 @bangank36you are a genius! it worked, thank you! I had to add !important; after the overflow-x: visible; Does this code mean that however many spacer blocks I have don't matter anymore? THANK YOU!!!! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment