Cannot get the jquery pluggin called "headroom.js"to work. Need help please!

Design help General
1

Hi there,

I’m trying to instal this plugin called headroom.js on my site and I cannot get it to work.
I have a little bit of experience with installing jquery pluggins but I’m a bit lost trying to apply the same thing using webflow’s interface.

basically all I want to do is to get my navigation bar to hide and show dynamically as you scroll up and down the page.
the pluggins demo site illustrates this perfectly.

here is the plugin’s demo site :

and here is the github page :

so far I tried the following :

I’ve added the scrip links in my footer code field :

2410×852 92.5 KB

I then went on my navbar settings menu and gave it an ID of “header” :

This is as far as my knowledge goes with this sort of thing. I know I must have missed something but I cannot for the life of me find my mistake.

you can take a look at my site here :

https://preview.webflow.com/preview/metro-security-haiti?preview=8aeabf42344e9cae8821875aed73bbc4

Any help would be greatly appreciated !
thanks !

2

Hi @patroc :smile:
line 9 in your footer custom code, add a “#” sign before header. so it looks like this #header

​Try these steps and let me know if you’re successful.

3

Hi there @PixelGeek
Thanks for the tip !
Unfortunately it didn’t work.

this is how my code looks like now :

<script>
  $(document).ready(function(){
   // simple as this!
// NOTE: init() is implicitly called with the plugin
$("#header").headroom();
    }
  });
</script>

If you have any other suggestions don’t hesitate to share !
Thanks again.

4


Remove selected line

1 Like
5

Thanks @bartekkustra,
I still can’t get it to work even with this edit.

Could it be that I’m missing something else? My navbar is a symbol and I have to double click in order to edit the actual navbar which is where I added my ID name “header”.

I’m still trying various things. Any help is appreciated !

Here is another link of the same example done in codepen here :

I tried bringing in that code as well with no luck.
if anyone could get this to work or create an example on webflow I would be forever grateful !

thanks again !

6

Maybe (and most probably) it’s because you have your code in <head> section instead of before </body>. In footer code first you have to call your script, then initialize it.

In case that won’t work, try the code below. I haven’t tested that at all but it should work.

<script>
	function hideHeader() {
		$('#header').slideUp();
	}
	function showHeader() {
		$('#header').slideDown();
	}
	$(document).ready(function() {
		// Firefox
		$('#header').bind('DOMMouseScroll', function(e) {
			if(e.originalEvent.detail > 0) {
				hideHeader();
			} else {
				showHeader();
			}
		});
		// IE, Opera, Safari
		$('#header').bind('mousewheel', function(e) {
			if(e.originalEvent.wheelData < 0) {
				hideHeader();
			} else {
				showHeader();
			}
		});
	});
</script>

Put this in your footer code, don’t include headroom.js at all.

7

Thanks for your help @bartekkustra.
Unfortunately everything I’ve tried doesn’t seem to work at all. I’ve tried with my code in the footer only that didn’t work.
I’ve tried putting my code in the header with no luck.
I’m aware that usually all links to scripts should be before the </body> code but in this case nothing works.
I am convinced it has something to do with the way I labeled my navbar within webflow’s design tool.
I’ve temporarily removed my scripts from the custom code section and going back to the instructions to see if there is any other way I could achieve this effect.

Any help is always appreciated.

Thanks again.

8

Any chance you could contact me over Skype? Details in my profile.

9

Sure @bartekkustra . What time would be best for you ?

10

9:00am - 10:00pm CEST :) too short

1 Like
11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.