Fixed div respective to section - help

Design help General
1

Hey all,

I’ve seen this question asked in a few times but I’m unable to make sense of the suggested approaches. Please advise;

Via; the public link

I would like my “Floating_nav” div to become fixed as it’s parent section reaches the top of the viewport. Thoughts?

Side question; As I go from section to section I would like to change the text in “Floating_nav” respective to the current section. Any thoughts on how I should approach that?

Thanks in adavance.

Here is my site Read-Only: https://preview.webflow.com/preview/mikes-superb-project-208232?utm_source=mikes-superb-project-208232&preview=8580944c62caab78f3d154b521ea8425
(how to share your site Read-Only link)

2

In my opinion (I never try this) - no way by webflow to create
sticky effect for selected parent container only for the entire page.

custom code

Anyway, it will take less than two minutes to move my codepen (Custom code) - to webflow:

3

Thanks,

anyone else have any other ideas?

4

No ideas. This is to much JS code (For now no way to change CSS (to fixed) by webflow interactions). rgalus sticky is a tiny library - why not use this?

wishlist Add / remove classes via Interactions

https://wishlist.webflow.com/ideas/WEBFLOW-I-214

How to create sticky container on webflow by custom code (Less than a minute):

Start point -

  • Parent: section
    — Child: div

image
image795×534 24 KB

  1. custom code - Copy-paste before body:
<!-- 1/2. load sticky.min asset -->
<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>
<!-- 2/2. instiliaze sticky-->
<script>
  var sticky = new Sticky('[data-sticky]', {});
</script>

  1. parent section. Add this attribute (webflow Custom attributes docs):
    name: data-sticky-container
    value: data-sticky-container

    image
    image1119×490 31.8 KB

  2. Child div. Add this attribute:
    name: data-sticky
    value: data-sticky

    image
    image913×247 19.6 KB

  3. Publish. Done :slight_smile:

result:

https://streamable.com/xot0g

More options

Add more custom attributes the same way (For “child”) - like margin-top or sticky only on desktop and so on:
https://github.com/rgalus/sticky-js#available-options

1 Like