This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
FX Fuhrmann
Posted Mar 23 - Read on Facebook

Hi everybody. I'm new to JS and new to Framer. Trying to learn as much as possible to get my design beyond flat screens :). I'm trying to build a sticky menu, like the Thumbtack website (http://www.thumbtack.com/). What is the structure to build it ?

8 Comments

Stephen Crowley

I hope I can give you a start, but I think the reward is trying some stuff on your own and seeing what works. With that said, I know it can be quite a challenge if you are unfamiliar with coding. I think this as your first project is great. First, try to get your page to scroll vertically. I envision you setting up your project with a page group and stickyheader group above it. Next, think about how you can "show" and "hide" the sticky header based on the scroll position. So, moving it up and down out of the device view. If you get stuck (no pun) or have specific questions feel free to shoot'em over! Good luck and welcome the Framer community!

FX Fuhrmann

Hi Stephen! Thanks for your help. I was able to import from Sketch and make the vertical scroll enable. Now, I'm trying to use show the sticky header at 400 px height (from the top). Do I need to check the "If then" function ?

FX Fuhrmann

Here is the code I wrote so far :

screenW = Framer.Device.screen.width
screenH = Framer.Device.screen.height
document.body.style.cursor = "auto"

# This imports all the layers for "live_framer" into live_framerLayers1
live_framerLayers1 = Framer.Importer.load "imported/live_framer"

page = live_framerLayers1.page
sticky = live_framerLayers1.sticky

sticky.opacity = 0

Main_layer = new Layer
height: screenH
width: screenW
backgroundColor: ""

Main_layer.addSubLayer(page)
Main_layer.scrollVertical = true

sticky.on Events.Scroll, ->
sticky.scrollX
sticky.scrollY

Andreas Wahlström

FX Fuhrmann here's an example for you. hope it helps! http://share.framerjs.com/qntjkky2ynvw/

FX Fuhrmann

hi Andreas Wahlström! Really nice of you. Thanks a lot. It is exactly what I'm trying to do. I'll dig this :)

FX Fuhrmann

UPDATE : I made it! Thanks to Stephen Crowley and Andreas Wahlström. If I need to host the Framer prototype in my website url, can I just drop in my framer folder the root folder of the website ?

Stephen Crowley

Credit to Andreas for whipping up that proto, nice work!

Sudhir Nain

Andreas thanks for the quick solution. I am another newb and wondering why you used navbar.animateStop()?

Read the entire post on Facebook