# You can do some cool things with Elements

**URL:** <https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747>\
**Category:** Elements\
**Created:** [May 25, 2025, 6:18am UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747 "2025-05-25T06:18:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 25, 2025, 6:18am UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/1 "2025-05-25T06:18:07Z")

</div>

I have been experimenting with creating a Quicklinks in-page navigation system and managed to create this cool sticky banner.

![CleanShot 2025-05-24 at 20.13.14](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/f/5f0a5f2ccec877a6707226ea829cd0dd31b4c398.gif)

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](https://elementsapp.io/) with a little effort.

Enjoy!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 25, 2025, 6:30pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/2 "2025-05-25T18:30:00Z")

</div>

Nice work, that is looking really great!

I was recently playing around in [Elements](https://elementsapp.io/) seeing if I could create a 3D style button, this is built using two containers, and adding a transform effects to the top one 😊

![CleanShot 2025-05-25 at 7 .27.07](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/a/2ac8a9dc80d85d81361c4ac399a837755fb8f2a4.gif)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 25, 2025, 6:33pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/3 "2025-05-25T18:33:16Z")

</div>

Clever idea, @dan

I’ll have to give that a try.

[Elements](https://elementsapp.io/) is so much fun. As far as I’m concerned with [Elements](https://elementsapp.io/) a website is never finished as you can constantly be enhancing it and making it better for users.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 26, 2025, 7:48pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/4 "2025-05-26T19:48:29Z")

</div>

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.

![CleanShot 2025-05-26 at 09.47.05](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/e/2e337a3d4795c1f3b74338d39ad7a7360617d35c.gif)

At the smaller breakpoints, it looks as follows.

 ![CleanShot 2025-05-26 at 09.39.23@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/a/da1b338f9c6e22a3318537329d6927f248c1f72e.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 27, 2025, 6:41am UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/5 "2025-05-27T06:41:41Z")

</div>

Just wanted to say that it’s really cool to see you building custom implementations like this directly in [Elements](https://elementsapp.io/) 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 27, 2025, 4:56pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/6 "2025-05-27T16:56:54Z")

</div>

The Power of [Elements](https://elementsapp.io/)!

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 27, 2025, 6:08pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/7 "2025-05-27T18:08:34Z")

</div>

@handshaper

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

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 27, 2025, 6:39pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/8 "2025-05-27T18:39:57Z")

</div>

@upssjw

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.

```auto
<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?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 27, 2025, 7:47pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/9 "2025-05-27T19:47:44Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 27, 2025, 9:49pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/10 "2025-05-27T21:49:16Z")

</div>

see you already cracked it I used invisible and opacity

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 27, 2025, 10:07pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/11 "2025-05-27T22:07:59Z")

</div>

this version uses hidden

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 27, 2025, 10:10pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/12 "2025-05-27T22:10:40Z")

</div>

I just swapped the hidden and block for the invisible and visible

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [May 27, 2025, 10:14pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/13 "2025-05-27T22:14:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [May 27, 2025, 10:15pm UTC](https://forums.realmacsoftware.com/t/you-can-do-some-cool-things-with-elements/47747/14 "2025-05-27T22:15:23Z")

</div>

cool AI is really your friend