I have been experimenting with creating a Quicklinks in-page navigation system and managed to create this cool sticky banner.
The Quicklinks are situated further down on the screen, but when you scroll up and it gets just below the menubar it sticks there and the content can scroll underneath it.
Not sure if it is the right thing to do or not but it is pretty cool that you can create something like this in Elements with a little effort.
Enjoy!
Nice work, that is looking really great!
I was recently playing around in Elements seeing if I could create a 3D style button, this is built using two containers, and adding a transform effects to the top one 
Clever idea, @dan
I’ll have to give that a try.
Elements is so much fun. As far as I’m concerned with Elements a website is never finished as you can constantly be enhancing it and making it better for users.
I decided to explore this concept further to make it more compact and functional across all breakpoints. On the smaller breakpoints, the quick links do not detach, this only happens when you get to a certain screen width.
I wrote a simple component that manages the visibility and display of the Quicklinks sub-menu.
Here is how it works now.
At the smaller breakpoints, it looks as follows.
I should also mention that the actual links in the Quicklink menu are being handled by the awesome Top Pages component.
There is a small glitch when the Quicklinks is being removed where the background goes away followed by the links, which remain visible for a few seconds. I’ll need some help from @dan and @ben to figure out how to get rid of the glitch.
Just wanted to say that it’s really cool to see you building custom implementations like this directly in Elements 
The Power of Elements!
Did you have any thoughts on why the Top Pages text seems to be lingering around for a few seconds when the Flex is set to invisible. I tried using the Hidden setting but wasn’t sure how to set the property correctly.
is this what you mean - the top line is a top pages in a flex - selecting invisible it takes a while to disappear, setting hidden is instant and removes everything
line 2 is component flex with text when I set invisible it disappears immediately
the third line is a component with top pages dropped in, this does not disappear immediately
hidden removes it all
I cant find my post yet I reported a similar issue with something else taking a while to disappear, cant remember the outcome
Aloha Steve,
Yes, I would prefer to use hidden, but I couldn’t figure out a clean way to invoke it inside a script.
Here is the code I’m currently using in the script.
<script>
const flex = document.getElementById('sticky-quicklinks');
window.addEventListener('scroll', () => {
if (window.scrollY > 500) {
flex.style.setProperty("visibility", "visible");
} else {
flex.style.setProperty("visibility", "hidden");
}
});
</script>
I tried different iterations using hidden but none of them seemed to work. I’ll keep experimenting. If you have any thoughts I would appreciate hearing them.
Should I apply the hidden class to the flex and then remove it to make it visible?
I tried getting ChatGPT to generate some code to use hidden intead of visibility and it created some great looking code that seems like it should have worked. But no luck no matter what I try I cannot get hidden to work.
So I’m stuck with using visibility and having the top pages content stay visible for a few seconds when hiding the bar. Maybe @dan or @ben have some insights as to how I can get rid of this glitch.
OK, finally cracked it. The problem is you cannot start with something HIDDEN as it is not in the DOM so that element is never found. You have to start with the OPACITY set to zero. Then you can simply show and hide the element using opacity. ChatGPT is awesome as it helped me crack this and get it working.
The only slightly awkward part is I had to add the opacity-0 class in the Advanced settings as I couldn’t figure out wherelse to set it to 0.
This is the code ChatGPT came up with in the end.
<script>
document.addEventListener("DOMContentLoaded", function () {
const flex = document.getElementById("sticky-quicklinks");
const threshold = 500;
window.addEventListener("scroll", function () {
if (window.scrollY > threshold) {
flex.classList.remove("opacity-0", "translate-y-4", "pointer-events-none");
} else {
flex.classList.add("opacity-0", "translate-y-4", "pointer-events-none");
}
});
});
</script>
AI is your friend I guess.
see you already cracked it I used invisible and opacity
this version uses hidden
I just swapped the hidden and block for the invisible and visible
That is what I was originally using, but this new code is even cleaner and has some animation as well. I’m happy with how simple it ended up in the end. But more importantly, it got rid of that weird glitch where the text from the top pages lingered on the screen.
Thanks for looking at it and pointing me in the right direction.
cool AI is really your friend