Jump to content

Split Sticky Sections

Recommended Posts

1 minute ago, vvc said:

@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!!!!

you site look great now

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
  • 1 month later...
  • 1 month later...
7 hours ago, sharine said:

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!

what is your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
  • 3 weeks later...

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:

370079272_Screenshot2021-04-08181015.thumb.png.e0d4814fd1ab46ea6655e96affc21315.png

 

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>

 

Link to comment
12 minutes ago, stapleshotz said:

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:

370079272_Screenshot2021-04-08181015.thumb.png.e0d4814fd1ab46ea6655e96affc21315.png

 

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>

 

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

image.thumb.png.74269cacc3e72586efd3fabcf259bd40.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget 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
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;
  }
}

image.thumb.png.74269cacc3e72586efd3fabcf259bd40.png

Haha wow, yeah that did the trick. It's perfect!

Thank you so much!

Link to comment
  • 1 month later...
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

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
  • 6 months later...

@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

 

1979610747_StickySplitSections.thumb.png.dd8efc9cac45989a636ca9269a8f4362.png

If your just using SquareKicker for this single feature, you can use SK for one month as a one off and changes save forever.

SquareKickerHi, 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

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.