Streaming live at 10am (PST)

Headroom js - (solved)


#1

Still looking for a solution for this. I checked out previous posts but nothing seems to be working. I even tried a brand new navbar with the code. I thought I could use webflow interaction as a solution and well it kind of works but is not a perfect solution because as the page size changes it also changes the position of the scroll trigger. If anyone has a working version with this script I'd love to know how you achieved it.

thanks
Jeremy

share site

https://preview.webflow.com/preview/shelleyjanze?preview=217cad07bc49a1fff5aa25bbbdc4b348


#2

I'd like to know this as well.


#3

@samliew @PixelGeek any thoughts, it should be a really quick and simple implementation from what I can tell. @cyberdave ???

I've started a new test page on style-sheet it is blank with just a navbar

here is the js reference page

http://wicky.nillia.ms/headroom.js/

It's a popular script and used a lot so I'd love to figure out how to get it to function with webflow


#4

This plugin is not something you can just plug into a site and it will just work. There is quite a lot of plugin customization and additional custom coding on top of it.


#5

@samliew @thesergie is that because of the way that webflow works? The script itself and i'm a self-admitted noob with JS but I have used other scripts successfully with webflow. The script in it's simplest form pins and unpins the header on scroll. There are further customizations as with any js. But the problem I am seeming to be having and as well others, is setting the class or ID of the navbar or div to be affected by headroom js.

I have tried a webflow solution with interaction. It kind of works, but because it is controlled by scrolling into view and not the actual scroll when the viewport changes size it makes the header disappear on load because the trigger is in view already.

Is there an interaction in 2.0 in the works, that will work with actual scroll and not working off a set trigger?


#6

I took a quick look at your site, you cannot include raw github files using github itself. You have to change the URL as specified in my Github tutorial in the tips and tricks category.


#7

I tried that. And I found them hosted on cloudfare library and tried that as well. Nothing seems to be working. I saw someone was looking for a solution about a year ago. I will contact them directly to see if thy found a solution I guess. Seems like an odd thing as I have found other scripts work quite well with Webflow. I wonder if embedding the script would make a difference.


#8

Let me paste the tutorial here since you might not have seen it. You should read it again. If the tutorial is followed to the dot, the existing error (screenshot above) on your site will disappear.

https://forum.webflow.com/t/how-to-embed-files-hosted-on-github/29281?u=samliew


#9


.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}


ok to the dot.
It calls those two scripts. and the scripts should effect .navbar-fixed-top I don't appear to be getting any errors. But it still isn't working. Did you get it to work Sam?


#10

Hint: You cannot use raw.githubusercontent


#11

script type="text/javascript" src="https://cdn.rawgit.com/WickyNilliams/headroom.js/master/src/Headroom.js">
script type="text/javascript" src="https://cdn.rawgit.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js">

I'm not


#12

Maybe you need to publish again. I'm still seeing that error.


#13

have you got it to work Sam? Do you have working prototype of it in webflow? I have nothing on that preview page style sheet besides a div with a background color. and that script. Well and a section that allows the page to scroll a little. Could it be a z setting??


#14

Oh I see, I was referring to your project http://shelleyjanze.webflow.io

Could you share the link of whatever you are looking at so that we can be on the same page?


#15

http://shelleyjanze.webflow.io/style-sheet


#16

i'm using on page custom code so it can be seen in the webflow preview.


#17

This issue might be related https://github.com/WickyNilliams/headroom.js/issues/258

Use

http://wicky.nillia.ms/headroom.js/assets/scripts/main.js?v=2

instead of

https://cdn.rawgit.com/WickyNilliams/headroom.js/master/src/Headroom.js

Apparently the plugin is no longer maintained.


I got it working here http://headroom.webflow.io


#18

THanks, that is awesome. Can you send me the share link? So I can see exactly what you did Sam? Does that mean that I have to host the .js somewhere else because the script is too long for webflow?

Seeing that is works in webflow I think will be a huge help to not just myself, but others who want to use this plugin.

Never mind I got it working but I guess because it is not hosted on ssl to avoid the error message I will have to host it somewhere secure. I saw a posting about AWS free hosting that might be a solution for these types of scripts.

Thanks again though seeing it actually work in webflow is a huge weight off. I really like the effect for top nav bars


#19

So thanks to Sam figuring out the js file wasn't working here is the elusive headroom js solution. There is also a secure hosted script on cloudfare

<style>
<style type="text/css">
.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/jQuery.headroom.js"></script>

<script type="text/javascript">
$(".navbar-fixed-top").headroom();
</script>

working site same as shared site at top. page style-sheet

remember to put script tags in if copy and pasting from here.

and make the class of the div or navbar navbar-fixed-top