Sticky element not working

joshuaechevarriadop · December 7, 2022

Hi im having issue with a sticky element not working. Not sure what the problem is. below is the code and a screengrab of whats happening. any ideas?

https://blueberry-carrot-xawg.squarespace.com/narrative-copy-1

pw codeblock

<html>
<div id="sidetitle1">
    <p style="letter-spacing:35px; opacity:100%; color:white; font-size:150%; font-family:lato; font-weight:600;">NARRATIVE</p>
  </div>
</html>

<style>
  #sidetitle1 {
  display: flex;
  position: sticky !important;
  position: -webkit-sticky !important;
  text-shadow: 1px 1px 10px #000 !important;
  writing-mode: vertical-lr; 
  text-orientation: upright;
  width: 25px;
  height: 100px;
  top:0px !important;
  z-index: 99999;
}
</style>

Beyondspace · December 7, 2022

56 minutes ago, joshuaechevarriadop said:
Hi im having issue with a sticky element not working. Not sure what the problem is. below is the code and a screengrab of whats happening. any ideas?

https://blueberry-carrot-xawg.squarespace.com/narrative-copy-1

pw codeblock
<html>
<div id="sidetitle1">
    <p style="letter-spacing:35px; opacity:100%; color:white; font-size:150%; font-family:lato; font-weight:600;">NARRATIVE</p>
  </div>
</html>

<style>
  #sidetitle1 {
  display: flex;
  position: sticky !important;
  position: -webkit-sticky !important;
  text-shadow: 1px 1px 10px #000 !important;
  writing-mode: vertical-lr; 
  text-orientation: upright;
  width: 25px;
  height: 100px;
  top:0px !important;
  z-index: 99999;
}
</style>
149486028_ScreenRecording2022-12-07at8_00_47AM.mov

How do you want it to sticky? Do you mean fixing this element on a fixed position?

Ziggy · December 7, 2022

Try changing this line:

position: sticky !important;

to:

position: fixed;

And adjust the top property to suit, probably about forty pixels.

joshuaechevarriadop · December 7, 2022

7 hours ago, Beyondspace said:

How do you want it to sticky? Do you mean fixing this element on a fixed position?

I'd love to have it scroll down until a certain point and then stop to introduce a new section that does the same action

Beyondspace · December 8, 2022

May be you can try

.fe-block-fdf87f3b28856d0d23e5 {
  position: sticky;
  top: 30px;
  height: 1px;
}

Hope it can help

cat_not_kitty · January 10

Thank you so much, BeyondSpace – this code worked perfectly for me (with my own .fe-block, of course)! For those using the amazing (and indispensable) Squarespace ID Finder extension for Chrome, you can just copy your desired block's ID, delete the #, and add .fe- to the beginning everything remaining to target your .fe-block.

I was running into this issue in a single usage of my sticky code for a reason that I haven't quite been able to decipher (I have two other seemingly identical sections on the same page – left aligned headers sticking to scroll alongside their respective accordions – that are working without the need for the height to be defined). A caveat for future readers that I needed to substantially increase the number after height for my site – to 280px(!) – so don't be afraid to really fiddle with that number to get your desired result 🙂.

mcdufrechou · October 18

Hmm, placing '.fe-' in front of my block id doesn't seem to produce any results.

When I use #block-yui, it will recognize 'fixed' but not 'sticky,' and when I apply ".fe-block" it won't recognize either.

Edited October 18 by mcdufrechou

Sticky element not working

Recommended Posts

joshuaechevarriadop

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Beyondspace

Beyondspace

Ziggy

joshuaechevarriadop

Beyondspace

cat_not_kitty

mcdufrechou

Create an account or sign in to comment

News

Beyondspace

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources