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
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
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
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
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
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
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
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
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
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
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
MariaFY Posted February 21, 2021 Share Posted February 21, 2021 Hey there, I'm looking to create a split section with 1 side fixed and 1 side that scrolls as seen on this page: https://www.violahillstudio.com/work Is there any code snipped, or tutorial you guys know to recreate this layout? I'm using Brine! Beyondspace 1 Link to comment
sharine Posted March 21, 2021 Share Posted March 21, 2021 Hey, @bangank36! I just installed the code on my site and changed the section-id but the effect isn't working. Do you think I can get some assistance with this? Thanks! Link to comment
stapleshotz Posted April 9, 2021 Share Posted April 9, 2021 Hey @bangank36! I've been fiddling around with this for a while and some of your previous posts have already helped me greatly, but I'm having an odd problem I can't seem to figure out. https://mbmtest3.squarespace.com/ pw: middleborn Thanks to you, I've managed to get that menu section on the left to behave how I want, but I can't figure out how to get rid of that big yellow box where the section would normally be. I'd like the content below to be right beneath the header video. I'm guessing this problem has something to do with the fact that I'm making an entire section sticky, rather than just a column in a section, but I'm not sure. What's odd is when I set the menu section's position to "fixed" instead of "sticky", the content beneath that section behaves how I want. See below: Any ideas on how to handle this? This is all the custom code I'm using on this page: (Apologies for the mess) <style> @media screen and (min-width:641px){ #header { display: none; } .page-section:nth-child(2){ width:20vw; z-index: 9999; position: sticky !important; background-color: transparent !important; top: 0; } .page-section:nth-child(2) .section-background{ background: transparent !important; } /* Menu Logo Edits */ .page-section:nth-child(2) .image-block{ width: 15vw !important; max-width: 250px !important; text-align: center !important; } /* Menu Button Edits */ .page-section:nth-child(2) .sqs-block-button-container--center { text-align: left !important; padding-right: 3vw !important; } .page-section:nth-child(2) .sqs-block { padding-top: 3px !important; padding-bottom: 3px !important; } .page-section:nth-child(2) .sqs-block-button-element { padding-left: 5vw !important; padding-right: 5vw !important; } /* Menu Left Justify */ .page-section:nth-child(2) .content-wrapper { padding-left: 0vw !important; text-align: left !important; } /* content to the right */ .content-wrapper { justify-content: flex-end !important; } } @media screen and (max-width:640px){ section[data-section-id="606f7adc828e892e3eaa0bc7"] { display: none; } } </style> Beyondspace 1 Link to comment
stapleshotz Posted April 9, 2021 Share Posted April 9, 2021 6 minutes ago, bangank36 said: may you try this @media screen and (min-width: 641px) { .page-section:nth-child(2) { min-height: inherit !important; position: sticky !important; top: 10vh; } .page-section:nth-child(2) .content-wrapper { padding-left: 0vw !important; text-align: left !important; position: absolute; top: 0; } } Haha wow, yeah that did the trick. It's perfect! Thank you so much! Beyondspace 1 Link to comment
casafloralia Posted May 19, 2021 Share Posted May 19, 2021 hey everyone, I'm trying to make the section with the title (green background) sticky to the left, while scrolling the section with the text (nude background) to the right. can anyone help? https://janetesilveira.squarespace.com/depoimentos-clb7 ps: 1234 Link to comment
sehar Posted May 20, 2021 Share Posted May 20, 2021 On 11/4/2020 at 11:57 AM, 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 was wondering if you could help me out with the split sticky section as well, i want to make something like https://www.breakthroughenergy.org/our-challenge/the-grand-challenges the sticky section here or like this https://habitat-tw.com.au/ I do not know where to start and how to split the sections, could you please help me out? Link to comment
sehar Posted May 20, 2021 Share Posted May 20, 2021 Site URL: https://habitat-tw.com.au/ Hi! I need help with making sticky split sections in my squarespace website, something along the lines of what https://habitat-tw.com.au/ or the challenges section in this page https://www.breakthroughenergy.org/our-challenge/the-grand-challenges, where the two sections move synchronously. my squarespace website url is https://sepia-cinnamon-pcxj.squarespace.com/ and password is: candela I want to implement this feature on the last mile grand challenges page, which will have 4 "challenges" or blocks, meaning 8 blocks in all (2 by 4) thanks in advance! Link to comment
casafloralia Posted May 20, 2021 Share Posted May 20, 2021 On 5/19/2021 at 6:09 PM, casafloralia said: hey everyone, I'm trying to make the section with the title (green background) sticky to the left, while scrolling the section with the text (nude background) to the right. can anyone help? https://janetesilveira.squarespace.com/depoimentos-clb7 ps: 1234 hey @tuanphan would you be able to help? 🙂 Link to comment
tuanphan Posted May 22, 2021 Share Posted May 22, 2021 Hi. Where is green background? 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
casafloralia Posted May 22, 2021 Share Posted May 22, 2021 7 hours ago, tuanphan said: Hi. Where is green background? hi @tuanphan thanks for replying. the one with the title "Do ZERO ao CLB7" i'd like that one to be sticky to the left, while the other section with the text can scroll to the right. Link to comment
Nick_SquareKicker Posted December 5, 2021 Share Posted December 5, 2021 @ecweb, @stapleshotz, @sehar, @HaleyWard Did you manage to get Sticky Split Sections to work? SquareKicker just released a tool that gives you the ability to achieve this with one click. Check out the video tutorial at the link below. https://squarekicker.com/letsmakethis/stickysplit If your just using SquareKicker for this single feature, you can use SK for one month as a one off and changes save forever. Hi, I'm Nick, CEO & Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Squarespace Extension ● Templates ● News ● Inspiration ● Tutorials ● Resources 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