Sticky footer element York

Site URL: https://iamabbytaylor.com/

Hi there!

I'd like to add a png element that is sticky in the bottom right corner of the screen at all times on desktop and tablet. For an example, I love how that happens with the & sign on this site: https://sagmeisterwalsh.com/ and want to achieve a similar effect on my site. It's also how pretty awesome how the & sign in the bottom right corner is only visible when you're scrolling, but no problem if that's not doable! 

Thanks so much,

Abby

As per the code on that site:

<div class="ampersandWrapper">
  <div class="ampersandDisplay">
    <div class="ampersandSpin" style="transform: rotate(360deg) translateZ(0px);">
      <div class="ampersand"></div>
    </div>
  </div>
</div>

.ampersandWrapper {
    clip: rect(0,auto,auto,0);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    background: url(/_static/graphics/transparent.gif);
    width: 100%;
    height: 100%;
}

.ampersandDisplay {
    width: 247.74px;
    height: 247.74px;
    bottom: 41.29px;
    right: 23.59px;
}

.ampersand, .ampersandSpin {
    width: 100%;
    height: 100%;
}

.ampersand, .ampersandDisplay, .ampersandSpin {
    position: fixed;
}

.ampersand {
    background-image: url(/_file/950d9b5a539cf60f5c812ad9db3d37e1.png);
	width: 100%;
	height: 100%;
	position: fixed;
}

The html for that was placed above the footer. You could probably put something like that in your Custom Footer CSS. It's not complete code, and I can't guarantee it will work as-is, but it might get you started in the right direction.

As for the visibility on scroll, you'd have to write a javascript to monitor onscroll and add/remove a visibility style.

hth.

@ChromaticZero thank you for this! What I'm thinking (as I am no coder by any means) is that I simply remove all elements from my footer except for the png I would like to be sticky, and use a spacer to push it into the right hand corner. then presumably I would just need a line of code that makes the background of the footer transparent, and makes it constantly present on the page ie sticky. Or am I oversimplifying the process? I have for instance a line of code that, once put into the custom css section, makes the site header sticky. I'm hoping for something similar.  Not too worried about it only appearing on scroll as that seems like a faff, and it doesn't have to rotate or anything like that. 

Thank you for your help so far!!

Hmm. I would probably do this entirely in custom CSS and use Code Injection. Keep it a separate concern from your footer as you'll likely want to use it and have it behave differently than this.

This is a bit of a shot in the dark, but you could try something like:

1. Go to Home > Advanced > Code Injection and add the following to the Footer Section

<script type="text/javascript">
  
  	$("#footer").before('<div class="floatIconWrapper"><div class="floatIconDisplay"><div class="floatIcon"></div></div></div>');
	
</script>

That should add the required HTML elements above your footer. Then you need to add the proper CSS to style it accordingly. If you modify the example I gave you earlier, you should be able to add a background image to a .floatIcon class, and position the .floatIconDisplay and .floatIconWrapper accordingly. Skip the ampersandSpin for now and just get the image you want to display at the bottom right with the CSS provided.

hth.