Sticky Sections

Hi - I was wondering whether anyone knows code to make sections sticky. The sections on the following links are set to 100% heigh of any device, but I would like sections to "stick" when you scroll down - like the BBC site:

https://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02

I would like to have this effect on our site: currently the page just scrolls down, whereas the BBC website section sticks until you scroll down. Thank you in advance - here is our site:

https://ttc-2023.squarespace.com/index-m

Password is: password

This is a website effect know commonly as snap-scrolling, you can add it with this script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section: ".page-section",
          });
        });
</script>

You'll have to be careful with adding it as it fixes the height to 100vw and will hide content overflow.

Thanks - do I need to change the following with section ID and others followed by commas?

".page-section",

7 minutes ago, mdemartin said:

Thanks - do I need to change the following with section ID and others followed by commas?

".page-section",

Only if you want it to apply to just specific sections on a page.

Thanks - I would like to apply it for all sections. Does this automatically make the section heights 100% or should I use my other code for that. I did put the following in but there is an error message saying - missing opening "{"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>

<script>

        $(function() {

          $.scrollify({

            section: "65303804d996e5561b628174", "653930ee61ffa6ca7b58edc4”, "6532cfa94cddb24b87fc6dfc"

          });

        });

</script>

and so it doesn't appear to be working. Thank you again

https://ttc-2023.squarespace.com/index-m

On 10/25/2023 at 10:58 PM, mdemartin said:

Thanks - I would like to apply it for all sections. Does this automatically make the section heights 100% or should I use my other code for that. I did put the following in but there is an error message saying - missing opening "{"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>

<script>

        $(function() {

          $.scrollify({

            section: "65303804d996e5561b628174", "653930ee61ffa6ca7b58edc4”, "6532cfa94cddb24b87fc6dfc"

          });

        });

</script>

and so it doesn't appear to be working. Thank you again

https://ttc-2023.squarespace.com/index-m

This code should add to Code Injection, if you add to Custom CSS, it will always show miss { symbol

On 10/25/2023 at 4:58 PM, mdemartin said:

and so it doesn't appear to be working. Thank you again

As @tuanphan said, this is a script, it's not appropriate to add to Custom CSS!