Menu icon Foundation
top-bar change size js-script?

I tried to apply the sample form this post to get an top-bar shrinking on scroll:
https://foundation.zurb.com/forum/posts/19112-hack-top-bar-to-change-size-on-scroll

But I can not get it working.
So to simply-fie things I used the js in a codepen test to find out how it works. But it does not work! What's wrong with my sample and why is the sample form the forum post not working? I have the js in the app.js file and have the html <div class="top-bar large"> in my page. ?

this is my test in  codepen instead of resizing I just want the color to change:
https://codepen.io/mr_vespa/pen/rGMWeo

jsshrinkresizetop-bar

I tried to apply the sample form this post to get an top-bar shrinking on scroll:
https://foundation.zurb.com/forum/posts/19112-hack-top-bar-to-change-size-on-scroll

But I can not get it working.
So to simply-fie things I used the js in a codepen test to find out how it works. But it does not work! What's wrong with my sample and why is the sample form the forum post not working? I have the js in the app.js file and have the html <div class="top-bar large"> in my page. ?

this is my test in  codepen instead of resizing I just want the color to change:
https://codepen.io/mr_vespa/pen/rGMWeo

Wiechert Hooghwinkel over 1 year ago

Hi any one who can point me in the right direction here? Thanks.

This is the codepen I made up to try the scroll effect but nothing happens? Is it loaded by default? Or is some additional code needed.

https://codepen.io/mr_vespa/pen/rGMWeo

W.

Wiechert Hooghwinkel over 1 year ago

Still looking for a way to get this working. Any help on this?

 

Thanks.

W.

Roy Six over 1 year ago

Hi Wiechert, for the codepen you should go into the JS settings (gear icon) and add external JS for jQuery first (place it before foundation.min.js). And in the internal JS, when you reference $("top-bar"),  change it so you reference the class with a leading period "." or create a variable and reference the variable if you will be using it multiple times.

// Reference top-bar by class:
$(".top-bar").removeClass...

// Or reference top-bar by variable:
var topbar = $(".top-bar");
$(topbar).removeClass...

 

Wiechert Hooghwinkel over 1 year ago

 Great now I've got it working nice :)

https://codepen.io/mr_vespa/pen/rGMWeo

 

Thanks.