Menu icon Foundation
Sticky not working! (F5)

Hey all,

So I've applied a sticky to the navigation bar on my site here: https://goo.gl/usRvGL

You'll notice a top bar (with a phone icon and free quote button), however I placed the sticky div that wraps around the main navigation, on the main navigation!

When I scroll, it should stick - but it doesn't!

Anyone have any ideas as to why it's not working?

Cheers,
JD

stickyhtmlcss

Hey all,

So I've applied a sticky to the navigation bar on my site here: https://goo.gl/usRvGL

You'll notice a top bar (with a phone icon and free quote button), however I placed the sticky div that wraps around the main navigation, on the main navigation!

When I scroll, it should stick - but it doesn't!

Anyone have any ideas as to why it's not working?

Cheers,
JD

Brett Mason about 3 years ago

So I had a look again but there is still an error in the console:

Uncaught TypeError: a.indexOf is not a function

This is related to jQuery that you have loaded which seems to be version 3, which I am not sure is supported by V5. There might be an issue with which version the Bower package is pulling in.

Could you try loading jQuery from here: https://code.jquery.com/jquery-2.2.4.min.js

So change <script src="bower_components/jquery/dist/jquery.min.js"></script>

to <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Brett Mason about 3 years ago

Ok so thats a good starting point.

I've just setup a really quick Codepen using your nav code plus some latin just to pad it out: http://codepen.io/brettsmason/pen/ORQkaO

As you can see it works OK. I did notice you had a sticky class on the top-bar element - try removing that and see what happens. If no luck try and load your Foundation css from here: http://cdn.foundation5.zurb.com/foundation.css just to test to see if that works.

Brett Mason about 3 years ago

You could also try and load the Foundation JS from here: http://cdn.foundation5.zurb.com/foundation.js

If those versions of the JS/CSS dont work then I'm running out of ideas!

Brett Mason about 3 years ago

Awesome we are definitely getting there. So if that's working then that must mean that the sticky classes are missing from your stylesheet. You need to check through your own version and see if they are there or not.

JD Fillmore about 3 years ago

I got it working!!!

The problem was that I had the following code in my app.css:

 

body, html {
   overflow-x: hidden;
}

When I changed it to:

html {
   overflow-x: hidden;
}

It worked perfectly!!!

Thanks a ton for your help Brett :) really appreciate it

Darrell MacLennan about 3 years ago

I have looked at the example from the F5 documentation, and your code...

On the div containing your top bar (leave out contain-to-grid [for now]):

<div class="sticky">
...
</div>

Try this on the navigation element:

<nav class="top-bar" data-topbar="" role="navigation" data-options="sticky_on: all">

 

Brett Mason about 3 years ago

I'm not hugely familiar with V5 but I'll see if I can help.

So having looked at your site there are a few console errors - could you firstly try removing the other sticky JS library you have added (jquery.sticky.js) plus the inline JS that follows and we can go from there.

JD Fillmore about 3 years ago

Changed the script source to the one you provided, still no sticky. Although.. no more JS errors! Making progress :)

What else? 

JD Fillmore about 3 years ago

Brett, some awesome progress here!

So I commented out the stylesheet link to app.css - which is where i'm doing all my styles. I then put a link to the CSS you have up there, and BAM! Sticky works!

<!--<link rel="stylesheet" href="css/app.css" />-->
    <link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />

However, all my styles are now gone haha. How do you think I should approach this now, where all my styles are active again?

JD Fillmore about 3 years ago

Anyone?

JD Fillmore about 3 years ago

Just tried it out, still not working :( any other ideas?

JD Fillmore about 3 years ago

I found a code the utilizes the F5 sticky EXACTLY how I want it (can be found here - http://www.codeply.com/go/BEfGlQL5b2).

However, when I paste it into my code, it still doesn't work! This is really strange..

Do you think I'm not linking my JS up properly? I'm using Sass, and I've imported the top-bar code.

JD Fillmore about 3 years ago

Thanks Brett!

Removed what you had requested, sticky still not working. What else could it be? It's weird because I downloaded a fresh install of F5, and the sticky function doesn't work out of the box.