fix: correctly check breakpoint

[DanielRuf]

Description

This PR fixes the bug caused by #11924

• Closes Sticky Top Bar not working after 6.5.3 #11924

Types of changes

• Documentation
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (anything that would change an existing functionality)
• Maintenance (refactor, code cleaning, development tools...)

Checklist

• I have read and follow the CONTRIBUTING.md document.
• The pull request title and template are correctly filled.
• The pull request targets the right branch (develop or develop-v...).
• My commits are correctly titled and contain all relevant information.
• I have updated the documentation accordingly to my changes (if relevant).
• I have added tests to cover my changes (if relevant).

[joeworkman]

LGTM

[joeworkman]

This pull request has been mentioned on Foundation Open Source Community. There might be relevant details there:

https://foundation.discourse.group/t/foundation-v6-6-1-shipped/67/1

[rickcurran]

Hi, I'm using 6.6.1 and I'm seeing the same behaviour highlighted here in issue #9892. Should that issue be fixed in 6.6.1 and does this issue affect it? Basically it's applying (or at least partially trying) sticky-ness to elements when on small break point.

[DanielRuf]

@rickcurran can you provide a codepen with 6.6.1 which reproduces this?

Also please provide the URL / file of Foundation that you use. This bug was fixed in 6.6.1.

[rickcurran]

Thanks @DanielRuf, I'm using the Zurb template build tools for this project and also using Flex Grid rather than the default XY Grid so I wasn't sure how to go about creating the same kind of configuration in a codepen using standard CDN based Foundation CSS and JS links, so I've just had to link to the JS / CSS files from my dev server to make a codepen work:

https://codepen.io/rickcurran/pen/mdJEWgb

In an effort to try and rule out the impact of any of my own code I've tried doing a fresh install using the Zurb template again just to make sure that I've definitely got all the latest versions of the JS / CSS files etc and it does all seem to be up to date. Even after the re-install I'm still seeing the same behaviour where at least some of the sticky attributes are being applied on page load when at the small breakpoint (note that it doesn't do it if you load at medium or larger and then scale down to the small breakpoint). I'm using source order classes on the page where I'm experiencing the issue and I thought it may be something to do with that, but removing those made no difference. It basically just seems to be applying some of the sticky-ness on small screens.

I applied this fix from this comment on issue #9892 and it does seems to fix my problem:

#9892 (comment)

[DanielRuf]

I'm using the Zurb template build tools for this project and also using Flex Grid rather than the default XY

I think the grid is not the problem.
You can use files from https://unpkg.com/browse/[email protected]/dist/css/

Well if this is one of the other issues, these are still open and unresolved so far. So I think this might not yet be fixed.

We could need some help with fixing these things.
If it is a new or different issue please open a new issue.

[rickcurran]

Thanks @DanielRuf, as far as I can tell it appears to be issue #9892 that is still the problem, so I think that open issue would be the relevant one. I'm pushed for time right now to try and look under the hood to see what's going on, but I'll add it as a 'todo' and take a look as soon as I can (The workaround I linked to above has got things working for me in the meantime).