How to create a bar that floats in the top of a section?

Design help General
1

Hi,

Does anybody know how to create a bar that floats in the top in a certain section, like the tour bar in LiveChat?

I’ve tried several things in “advanced position”, but just can’t get the effect.

Thanks!

Ally

2

Hi @AllyC, this is not officially supported yet in Webflow, but if you’re feeling brave you can manually implement this feature using a custom script embed.

We have an example of a 3rd party “affix” plugin in action here:
http://affix-demo.webflow.com/

And the read-only link to the design tool:
https://webflow.com/design/affix-demo?preview=21b1d0b726f25678ca3d3800eea83ce6

Hope that helps!

2 Likes
3

I see. Thanks for your help!

4

Hello, Curious if you expand a bit on the process of getting this working. Anything other than grabbing the embed code and giving the element an id of myaffix?

slingshop-a.webflow.com/more-info

5

Not sure if this is what you mean but here is a stripped down version of what you might be asking from a microsite we were putting together.

This is affixed to the top of the page and is intended as a “TOP” navigation button

https://webflow.com/design/signaturebrand9100339?preview=f845524303f011929cf778406a9fcb8a

6

Hi @danro,

I tried to implement the “affix” plugin to my navBar but it doesn’t work. Is there anything else I have to do beside adding the script and assign an ID “myaffix” to the element?

7

Much like @vumhoang , I couldn’t get this to work. What are we doing wrong?

8

I got it working now @ma_tias.
Here’s the missing piece that I found out from @thesergie post in another topic:

http://getbootstrap.com/javascript/#affix
It said that: “In both situations, you must provide CSS for the positioning and width of your affixed content.” So I checked again and the Button in the example website has a nested class named “affix” with its own css settings:

.button.affix {
position: fixed;
top: 0px;
z-index: 999;
}

So what you have to do now is set that up for whatever the element you want to stick on top (navBar) and make sure it has the ID “myaffix”. Hope this helps!

1 Like
9

You sir @vumhoang have truly earned my great many thanks for today!!! :smiley:

10

I got this working. It is pretty cool. Thanks for the example.

Could you update the example to include affix-bottom too based on a footer or something scrolling into view?

I can’t figure out how to do this within webflow.