Nice menu script - menu visible on...

User 2846109 Photo


Ambassador
341 posts

https://github.com/eduardomb/scroll-up-bar

sample:
http://eduardomb.github.io/scroll-up-bar/

I found this small great script that makes the menu appear when the user scrolls up. Keeps the page clear until the user needs the menu.

I was able to get it to work in RSD but I couldn't figure out how to apply the
$('#topbar').scrollupbar();
code using the data attributes section.

I added that code inside of the footer area as a script to get it to work but is there a way to add this code inside of an attribute on the menu div? Just wondering if there is a better way to add it besides in the footer section.

Not sure if it would be:
Name: scrollupbar
Value: #topbar
(I tried this but it didn't work)

Cheers!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 187934 Photo


Senior Advisor
20,271 posts

The reason you need it in the footer is because you need JQuery available first then you call your script.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 244626 Photo


Registered User
811 posts

I think Foundation "Sticky" does this also....

http://foundation.zurb.com/sites/docs/sticky.html
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Ok, that makes sense, Eric! I don't mind having it in the footer, just kind of wondering if there was a better place for it. :)

Sticky, looks cool, TS. I didn't see a setting that made it appear only on an upscroll but I'll look into it more.

Cheers guys!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

Jeff, I see your point on Sticky not working on scrollup......my bad !

I have run across another header hide called headroom.js. Looks interesting too but hard to beat your one line of code !
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

Yeah, I was pretty happy that it was so small and easy to implement into RSD!

I always thought the reveal on scroll-up was a nice UI feature.

http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.