Is this sticky nav possible?

Design help Animations & Interactions
1

Trying to create this for a client and was wondering if it was possible?
Basically the nav if fixed to the bottom of the browser window and when the user scrolls down it scrolls up and stops at the top of the browser window.
(see link for example)

Cheers
Sveky

2

The sticky idea is more complex on webflow (No way (yet) to change CSS by interaction - sticky change the position to fixed on the fly).

By webflow custom code, it’s very easy to solve this (less than 1minute).

  1. paste before body:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-js/1.2.0/sticky.min.js" integrity="sha256-Bo3JGQq9V2eOtdGq6qYConGQtsVgey3GSlz5d03tK7M=" crossorigin="anonymous"></script>

    <script>
      var sticky = new Sticky('[data-sticky]', {});
    </script>

webflow tree: Add data-sticky="data-sticky" for element X. Publish - done.
image

Add options if you want:
image

Docs:

without code:

Try this project:
https://webflow.com/website/Sticky-On-Scroll
-or-

2 Likes
3

Thanks @Siton_Systems :ok_hand:

1 Like
4

Long ago – still this is exactly what I needed too! Thanks! ;-)
One question: Do you know how to deactivate that for mobile?
Cheers & Thanks!
Manuel

edit – found the solution already:
with the attribute “data-sticky-for” you can set a breakpoint.