Please start all application with "HAVE READ REQUIREMENTS". This is to filter out automatic applications.
Please visit this store (homepage only) for context of what I am about to explain – https://interstellargoods.myshopify.com. The password is "eaphia"
So I have an online store, and basically it's a one page scroll homepage. As you can image, this can be quite a long scroll for customers.
What I want to do is to create a sticky bottom navigation bar on mobile view only, that appears after scrolling downwards past the "Travel Accessories" title. If scrolling is upwards before "Travel Accessories", the sticky bottom navigation bar should auto hide.
This navigation bar will have two portions – (1) Title portion showing the current section's title and (2) "Contact Us" portion. The Title portion will be 2/3 view-width and the "Contact Us" portion will be 1/3 view-width.
For the Title portion, as the user scrolls down to different product collections, I want it to change to show a specific title. So for example when they scroll to the backpack collection the Title portion should change to "Backpacks", and as they scroll down to "Everyday Carry" the Title portion should change to "Everyday Carry".
When the Title portion is clicked, I want a slide-up tray menu showing a list. The items of this list corresponds to different anchor links on the page, to slide up to different parts. So for instance the user is currently at "Backpacks" and clicks on the Title portion. A list should slide up showing "Everyday Carry" and "Travel Accessories" – when clicked, it anchor links to that section.
Now on to the "Contact Us" portion. When the "Contact Us" portion is clicked, I want a slide-up tray menu showing a list of options as follows:
Each of these list items will have links that I will provide later on.
To make your job easier, you can view this codepen for code to create a bottom sticky bar. It is a good starting point for this project – [login to view URL]