Cool + super easy sticky effect on website footer

Mar 26

Written By Paulina

I feel like seeing footers as an afterthought in terms of web design creativity is becoming more of a thing of the past, especially as I’m seeing more people talking about the footer.design website.

One footer design I really like is the one on the BAGGU site — they put a sticky image on top of their wordmark for a really cool scroll effect.

I made a TikTok/Reel on how you can recreate the effect two ways: one using Squarespace’s new pin feature, and another using all code (which could then be used on other web builders!)

Watch below and scroll down for the code —

@pauwi.na fun sticky footer effect for websites — you can do this on any web builder that lets you add code! #webdesigner #webdesigntips #webdesign #webdesigninspiration #webdev #creativewebsites #designtutorial #codingtips #squarespacedesigner #csstips #squarespace #freelancegraphicdesigner ♬ original sound - pau

HTML code:

<div class="sticky-footer">
<h1>BIG TEXT</h1>
  <img class="sticky-footer-img" src="https://images.squarespace-cdn.com/content/v1/64d5e9dd2b380b748904bcaa/1619df01-35b4-4c23-acc2-f75ce986a816/LARO_blog_baggu-footer-PPG.png">
</div>

CSS code:

.sticky-footer-img{
  position: sticky;
  bottom: 0px;
  margin-top: -100px;
}

That’s it! Note that the sticky effect working on the coded version depends on the size of its parent div, which is why I put the image and the big text inside a div in the HTML. Play around with settings to get your desired effect!

If you want to work with our studio to build your brand or custom website, hit up our contact form 🤗

And if you’re interested in how I’ve learned a lot of my Squarespace design and development tricks, the Standout Squarespace course by Squarestylist has been huge as a learning resource and community for me. If you’re interested in joining, this is my affiliate link for Squarestylist courses!

Paulina