Jump to content

Make text block sticky

By SaniceMarlow, in Customize with code

Recommended Posts

creedon Level 15

creedon

Posted
Posted
1 hour ago, v-web said:

Have tried the updated code but still seem to be having the same issue.. don't know if there is something else that has been changed or maybe a mistake on my behalf?

You have two copies of the code. The old code is overriding the new code. Remove the old code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Replies 69
  • Views 7.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

With Fluid Engine, the code will be easier Use this @media screen and (min-width:768px) { .fe-block.fe-block-yui_3_17_2_1_1657545122796_8262 { position: sticky; top: 0; position: -

tuanphan
tuanphan

I think you should move right image in separate section. Then you can use WillMyer Split section code & make left side sticky easier. Or you can set sticky for all blocks, & adjust top va

creedon
creedon

The trick with sticky elements is that for something to be sticky it's parent element needs to be tall enough for the element you want to be stuck to stick in. If you don't have this relationship, the

Posted Images

laterrarossa Level 5

laterrarossa

Posted
Posted

Good afternoon. I have an HTML element on the right side of my Brewing Guide pages which operates as a brewing timer. I would love for this timer to be sticky and stay at its position as you scroll beyond it, so that users may see the running timer as they read through the next steps of the guide. 

One of the example pages is https://laterrarossa.com/aeropress

The code for the timer is as follows: 

<html lang = "en">
    <head>
       <title>Stopwatch</title>
    </head>
    <body>
        <div><strong>Seconds:</strong> <span id="time">0</span></div>
        </center><input type="button" id="startTimer" value="Start" onclick="start();">
        <input type="button" id="stopTimer" value="Pause"  onclick="stop();">
        <input type="button" id="resetTimer" value="Clear"  onclick="reset();">
    <script>
            var timeElapsed = 0;
            var timerID = -1;
            function tick() {
                timeElapsed++
                document.getElementById("time").innerHTML = timeElapsed;
            }

            function start() {
                if(timerID == -1){
                    timerID = setInterval(tick, 1000);
                }
            }

            function stop() {
                if(timerID != -1){
                    clearInterval(timerID)
                    timerID = -1
                }
            }

            function reset() {
                stop();
                timeElapsed = -1;
                tick()
            }
        </script>
    </body>
</html>

Thank you all,

 

Michael

Link to comment
creedon Level 15

creedon

Posted
Posted
53 minutes ago, laterrarossa said:

I would love for this timer to be sticky and stay at its position as you scroll beyond it

This doesn't stick in position but sticks near the top of the page as you scroll. The effect also only works at desktop breakpoint and above.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. 

<style>

  @media screen and ( min-width : 768px ) {
  
    .fe-block-62f96d53dec28cbe8cd1abd1 {
    
      position : sticky;
      top : 200px;
      
      }
      
    }
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
laterrarossa Level 5

laterrarossa

Posted
Posted
21 hours ago, creedon said:

This doesn't stick in position but sticks near the top of the page as you scroll. The effect also only works at desktop breakpoint and above.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. 

<style>

  @media screen and ( min-width : 768px ) {
  
    .fe-block-62f96d53dec28cbe8cd1abd1 {
    
      position : sticky;
      top : 200px;
      
      }
      
    }
    
  </style>

Let us know how it goes.

@creedon Thank you so much! This is working great for the example page I had sent, but not yet for the other, though I added the same code to the code injection for each individual page. Forgive me for my lack of knowledge, but I am guessing that the fe-block part of the code is pointing to that elements position on that specific page? I may be far off. If so, I am guessing I can pull the position for each page by inspecting the element within the developer tools in my browser to adjust the code on per-page basis?

Link to comment
laterrarossa Level 5

laterrarossa

Posted
Posted
9 minutes ago, laterrarossa said:

@creedon Thank you so much! This is working great for the example page I had sent, but not yet for the other, though I added the same code to the code injection for each individual page. Forgive me for my lack of knowledge, but I am guessing that the fe-block part of the code is pointing to that elements position on that specific page? I may be far off. If so, I am guessing I can pull the position for each page by inspecting the element within the developer tools in my browser to adjust the code on per-page basis?

@creedon I was able to pull the other 3 indentifiers by inspecting the element for each page and that worked perfectly! Thank so much for you assistance!

Link to comment
  • 2 weeks later...
sophieL13 Level 2

sophieL13

Posted
Posted (edited)

Hello @tuanphan, I'm trying to make a sticky subnav text for a page I am working on but the CSS code does not seem to be working, even when I change the element ID:

https://dog-buttercup-ap58.squarespace.com/revelations-1331/

PW is: revelation123

I'm looking to make the text section ["install view" etc] sticky as images scroll past.

Any help would be appreciated, thanks! I'd also like to be able to replicate this on other pages.

 

Edited by sophieL13
Link to comment
LisaLenkens Level 4

LisaLenkens

Posted
Posted (edited)

Hey, this code might be of help, this is for fluid engine btw. see more info on my website https://lisalenkens.com/split-scroll-screen-sticky-column/ 

@media only screen and (min-width: 700px) {
// Add these lines for your section to be on flex display //
section[data-section-id="HERE_YOUR_SECTION_ID"] {
  display: flex;
  flex-direction: row;
}

// Add these lines for your column to be sticky and stick to the top + 80px, you can adjust this to your liking //
section[data-section-id="HERE_YOUR_SECTION_ID"] .fe-block-HERE_YOUR_BLOCK_ID {
  position: sticky !important;
  top: 80px !important;
} 
  
// Add these lines to be able to edit your section and blocks as usual //
section[data-section-id="HERE_YOUR_SECTION_ID"] .is-editing div .fe-block-HERE_YOUR_BLOCK_ID {
  position: absolute !important;
  top: 0px !important;
}
  
}

Replace the section ID's with your ID's and the fe-block as well. 
good luck!

Edited by LisaLenkens
Link to comment
sophieL13 Level 2

sophieL13

Posted
Posted (edited)

Update: I upgraded the section to Fluid Engine and it works, thanks very much!

 

Hi Lisa, thanks for the code.

 

When I enter this code though it freezes the screen at a much higher point - I can't get past the header image in both desktop and mobile view. I am using a mix of Fluid Engine and some Classic Editor blocks on the page - might this be causing the issue? I am using the second section ID as the starting point and the block ID in the bottom left of this screenshot.

 

Any help would be appreciated, thanks,

Screenshot 2023-02-08 at 14.56.18.png

Edited by sophieL13
Link to comment
sophieL13 Level 2

sophieL13

Posted
Posted

Hi again - is it possible to make sure the sidebar stays sticky as you scroll past multiple sections on a page? At the moment it is visible only as you scroll past one section - but when you get to the second section with different content it gets pushed off the screen. 

 

 

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
On 2/8/2023 at 11:09 PM, sophieL13 said:

Hi again - is it possible to make sure the sidebar stays sticky as you scroll past multiple sections on a page? At the moment it is visible only as you scroll past one section - but when you get to the second section with different content it gets pushed off the screen. 

 

 

To achieve this, you will need to use a script code (require a Business Plan or higher). If you use business plan/higher, let me know, we will check code

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
  • 3 weeks later...
v-web Level 4

v-web

Posted
Posted
On 1/18/2023 at 12:31 AM, creedon said:

You have two copies of the code. The old code is overriding the new code. Remove the old code.

Hi Creedon, its definitely the only code in the header injection field. Or is there somewhere else I should be looking for the old copy of the code?

Screen Shot 2023-03-01 at 7.11.04 PM.png

Link to comment
creedon Level 15

creedon

Posted
Posted
5 hours ago, v-web said:

Or is there somewhere else I should be looking for the old copy of the code?

Yes. Please see Using code injection for other locations where it might be. I suspect Settings > Advanced > Code Injection > HEADER.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...
tuanphan Level 17

tuanphan

Posted
Posted
On 3/17/2023 at 2:34 PM, charlineca said:

Hi, I have a sticky split (audio button) but it only applies to the section itself. Any way to make it sticky on the whole site?

 

https://rabbit-orchid-h7nk.squarespace.com/ pw is squarespace.

Add to Design > Custom CSS 

[data-section-id="64129d6c862646001cc97077"] {
    z-index: 999 !important;
}

 

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
  • 2 months later...
CliftonRhoad Level 4

CliftonRhoad

Posted
Posted (edited)

I would like my audio / video players to remain sticky to the top so they can float alongside the open lyrics for each song...

Any way to have a block remain sticky alongside an open accordion tab, that opens below the end of the section?

https://summercampforsongwriters.com/audio

Any thoughts @Nick_SquareKicker?

Edited by CliftonRhoad
Wanted advice from a certain user
Link to comment
Nick_SquareKicker Level 9

Nick_SquareKicker

Posted
Posted

Hi @CliftonRhoad,

Have you tried SquareKicker Sticky Blocks?

https://www.squarekicker.com/letsmakethis/no-code-sticky-blocks

 

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources