How to make sidebar element that follows user as they scroll

Elements
1

Hi, I’m making a website for an assignment and I want to create a sidebar that follows users as they scroll down (essentially it doesn’t move but the rest of the page does).

This is an example. https://www.futurity.org/learning-speed-brains-neurons-2038802/
(click on the ‘more’ button on LHS of webpage to see what I’m talking about)

2

@ohmahaha

Welcome to the Forum!

Here is one solution to your question:
Hype Demo Project: stickyElement-bottomPin_JHSv3a.hype.zip (25.0 KB)

Live Demo here.

The key aspect in this Demo is the CSS scripting found in the “Head HTML”. The class(es) for each Element/Group is set in the “Identity Inspector”.

<style>
    .fixed {
       position: fixed !important;
    }
    .fullHeight {
       height: 100vh !important;
    }
    .sideBarHeight {
       min-height: 700px !important;
    }
    .screen-bottom {
       bottom: 50px;
    }	
</style>

The rest is just a matter of grouping the proper elements together and creating the "Flexible Layout" settings (found in the "Metrics Inspector") for each Element or Group as needed.

Side Note: I skimmed the article You linked to - I look forward to reading it in full - looks interesting!

2 Likes
3

Thank you! It worked perfectly :slight_smile: