Foundation-sites: Sticky component doesn't honor data-sticky-on attribute

[gpspake]

How to reproduce this bug:

1. Create a layout with sticky elements in accordance with the sticky component examples in the docs
2. Set data-sticky-on="large" attribute on sticky elements

What should happen:

elements should only be sticky on large and all dom manipulations associated with the sticky component should not be applied on screen sizes smaller than the one specified in the data-sticky-on attribute.

What happened instead:

It seems like it's trying to work but there are lots of side effects and it's highly prone to jank. dom manipulations continue to occur on screens smaller than the one specified which can result in overlapping elements, disappearing elements, and other jankiness.

Test case:

Here's a codepen that demonstrates the problem.
This layout includes left nav, a main content area, and a right nav and utilizes source ordering and sticky sidebars.
On mobile: Main content is full width, Left nav and Right nav are positioned below main content
On medium: source ordering kicks in and moves the sticky left nav to the left of main content, right nav stays at the bottom
On large: left nav is sticky, main content scrolls, right nav is sticky

For reference, here's the same codepen without the sticky classes to demonstrate that the layot itself (i.e. the source ordering) is behaving as expected.

I hope the issue here is that I'm just not using the data-sticky-on properly :)

[dragthor]

Are these working correctly for you:

Foundation.MediaQuery.is("medium")

Foundation.MediaQuery.is("large")

[gpspake]

@dragthor in what context? Everything's working fine with the exception, it seems, of the data-sticky-on attribute listed in the docs. If you set data-sticky-on to large, then the sticky component should only manipulate the element on large screens and greater but, as the codepen demonstrates, it continues to make changes to the dom on smaller screens. So to answer your question to the best of my understanding, yes, everything breakpoint-related is working properly; the only thing not behaving as expected is that data-sticky-on attribute.

[jerturowetz]

Same issue here as described above. Imma pour into the JS but might be in way over my head.

@gpspake know if there are js 'hooks' or some kind of Foundation guideline for isolating JS issues or error reporting?

[sveetch]

Same issue here, set data-sticky-on to large but the plugin still set a value to css property "height" on small and medium media queries.

[Ateker]

@scottsawyer, I have the same issue with a site I'm building. Everything functions fine until you refresh the page on a non-large screen from anywhere but page top. Then the contents of data-sticky-container move to the bottom of the page and looking like they disappear.

I can't put this site into production without a patch. I've dug into the CSS and JS a bit but it's over my head. Any word on whether Zurb is working on this?

[kball]

Would like to get this fixed for 6.4 (roughly 1 month out). @colin-marshall can you take a look, or shall I?

[kball]

(assuming the fix doesn't require major restructuring we'll also backport it for a 6.3.2 patch)

[Ateker]

@kball Thanks for the quick update. Please let us know if it will require a major restructure so we can hack around it.

[lukedanielson]

Experiencing the same behavior that @Ateker is experiencing; refresh on non-large screen when scrolled down the page, the sticky element drops near the bottom of the page with the 'top' css declaration.

Guess it is not quite correctly interpreting the position of the element specified in 'data-top-anchor="element_id:bottom"

[dobromir-hristov]

Still buggy on 6.4.0 😄 Just came into it.

[cunhaax]

@dobromir-hristov implementing another grid system (3 grid systems now!) was more important than fixing bugs... this tells me a lot about the future of Foundation... http://foundation.zurb.com/forum/posts/38374-so-long-and-farewell
I'll stop following this issue and consider alternatives

[peterbournecommunications]

Yes - Sticky hasn't been consistent since v5. Getting really inconsistent results with it - even when implementing it using just the example code. (which is not that useful).

[sjardim]

On a side note _(I didn't want to open another issue)_:
Using Zurb Template, building for production, Sticky won't work unless you set ".sticky" on UNCSS options on the config.yml file.
Lost 40 minutes debugging this.

Edit: I'm considering UNCSS is enabled for production. It's not, by default.

[gandalfar]

As a workaround, put this into app.js:

if (!Foundation.MediaQuery.atLeast('large')) {
  $('.sticky').foundation('_destroy');
}

[sveetch]

@gandalfar i did something like this:

$(function($) {
    $(document).foundation();

    if(!Foundation.MediaQuery.atLeast('large')) {
        $('.sticky').foundation('destroy');
    }
});

But it did break some JS components like the MediaQuery for code after this part, does the underscore before destroy makes a difference ?

[gandalfar]

@sveetch It looks like destroy (and _destroy) incorrectly removes all JS plugins. There's probably another ticket for this somewhere.

[guyvanbael]

Sticky seems to be very buggy in Foundation 6.4.1 I 'm creating a header with titelbar, topbar, dropdown menu (drilldown on mobile). This is the sticky part of my code..

<div data-sticky-container>div data-sticky data-options="marginTop:0; stickyOn: small;" style="width:100%;">

With this code, the titlebar is not sticky on mobile. The only way i got this to work is by adding some javascript, but it's not beautiful on mobile cause the sticky region is 'flickering' becaus everytime the user scrolls, the javascript is executed to keep everything in place. This is the javascript.
function fix_scroll() {var s = $(window).scrollTop();var fixedTitle = $('.sticky'); fixedTitle.css('position','absolute');fixedTitle.css('top',s + 'px');}fix_scroll();$(window).on('scroll',fix_scroll);

[yorb]

I'm using Foundation 6.3.1 and have been fighting the issue described by @scottsawyer and @Ateker. Specifically, the one where the sticky element loads partway (or all the way) down the page on refresh or when navigating to another page and going back.

It's inconsistent, which makes me think it has to do with the loading order. Foundation as a whole is typically initialized before $(document).ready(), but some plugins—like Sticky—clearly need to know the position of everything before they initialize, otherwise stuff like this is going to happen. I suspect the plugin is not waiting, which is causing this mess.

I started out just destroying the sticky things on page load when the screen is small (@gandalfar's tip), but then they need to be reinitialized if the screen size increases (think rotating a device to portrait and back). Programmatically initializing sticky things has its own problem (#10505), which can be solved by manually triggering load.zf.sticky but then the console gets littered with errors and that's yucky.

So, a workaround:

I noticed a couple of sticky.zf.unstuckfrom:top events fire on refresh, and whenever it bugs out there's also a single sticky.zf.unstuckfrom:bottom (Note that none of this should be happening, since this is a small screen and stickyOn defaults to medium, but I digress). So, just listen for that buggy event to fire and remove the offending classes and styles from the sticky thing, which should put it back to its starting position.

// Prevent small screen page refresh sticky bug
$(window).on('sticky.zf.unstuckfrom:bottom', function(e) {
  if (!Foundation.MediaQuery.atLeast('medium')) {
    $(e.target).removeClass('is-anchored is-at-bottom').attr('style', '');
  }
});

If you have some custom inline styles (like width:100%) you may want to remove just the top style instead of wiping them all out.

[RVXD]

You can disable the sticky module by using server side mobile detection.
https://github.com/serbanghita/Mobile-Detect
Just leave out the sticky data-tags if it is mobile.

[deepaksp]

are they ever going to fix this issue ? though thr are some other issue with sticky class !

[guyvanbael]

in 6.4.3 sticky is working as expected

[deepaksp]

not for me .. using 6.4.4-rc1

[RVXD]

Also the issue exists in 6.4.3. On small and medium sticky is still activated with data-sticky-on="large".

[guyvanbael]

strange... this one's made with 6.4.3 ....
https://vdidesign.be
was originally created using 6.4.1, but after i updated to 6.4.3, the sticky bit worked!

[deepaksp]

@guyvanbael sticky works well if set for both mobile and desktop not so well if you want only for desktop.
Also I have site where left sticky sidebar overflow footer area sometime (when scrollbar is at bottom).

[mjoyner-blockable]

I'm using 6.4.4-rc1 and it is still an issue. I needed the element to be sticky on anything large or above.

Solution that worked for me:

A slight variation from the solution of @yorb
$(window).on('sticky.zf.unstuckfrom:bottom', function(e) { if (Foundation.MediaQuery.atLeast('medium')) { $(e.target).removeClass('is-anchored is-at-bottom').attr('style', ''); } });

[proimage]

This is twice now in one project that I've thought that a sticky element would be nice to have and tried implementing it, only to find that the responsive aspect is broken. *le sigh*

[josiemedel]

I'm also using 6.4.4-rc1 and still running into this issue. Using _destory doesn't work either since I have a modal window being launched from the sticky and this removes this as well.

I only needed an element to be sticky on large and this did it. For some reason medium down did not work for me and I had to use the OR operator.

$(window).on('sticky.zf.unstuckfrom:bottom', function(e) { 
    if (Foundation.MediaQuery.atLeast('medium') || Foundation.MediaQuery.atLeast('small')) { 
        $(e.target).removeClass('is-anchored is-at-bottom').attr('style', ''); 
    } 
});

[DanielRuf]

Please clone the current develop branch, rebuild using gulp and try the generated dist files.

Can you also provide a codepen which reproduces the issue so we can test it?

[mhulet]

I'm on 6.4.3 and I want to have sticky elements only for medium+ screens. Here is how I achieved it:

if (Foundation.MediaQuery.current == 'small') {
  $('.sticky').removeAttr('data-sticky');
}
$(document).foundation();

[OvalMedia]

6.5.3 and sticky is still buggy as described .

[proov]

Yeah i can confirm, i'm in 6.5.3 and still have this issue

[Defiled]

We're having to remove and add the sticky classes manually via jQuery as well on v6.4.3.

[DanielRuf]

6.4.3 is outdated and there were many issues fixed in the latest releases.

[DanielRuf]

Can you also provide a codepen which reproduces the issue so we can test it?

[Defiled]

Upgrading to v6.4.3 fixed the data-sticky-on issue for me. However, I think many people ending up here are experiencing problems with the sticky elements appearing at the bottom of the page with a very high value in the top property.
This bug has been documented and there are workarounds available here: https://github.com/foundation/foundation-sites/issues/11098

[filt3rek]

Hej guys,

I'm using foundation 6.5.1 and all is working fine except on mobile, when I first load the page (removing the cache) it works well (it sticks and when changing orientation from portrait to landscape, it expands well to full width, but when reloading the page second time, it only sticks the first height of my page, then it diseapears (roll up) and doesn't expand to full width when changing orientation from portrait to landscape.
Does anyone have a good solution for that please ? @Defiled you says to add sticky classes manually, when please ?
Thanks for reading,

[rickcurran]

Can anyone else confirm that they still see this issue occurring using v6.6.1? I seem to be encountering the same issue using the latest Foundation release so just wanted to check if others still see this occurring. I've worked around it for now using Yorb's code from his comment above: https://github.com/foundation/foundation-sites/issues/9892#issuecomment-322878472

[chrisongster]

yes. 6.6.3 - still expieriencing that issue...

Can anyone else confirm that they still see this issue occurring using v6.6.1? I seem to be encountering the same issue using the latest Foundation release so just wanted to check if others still see this occurring. I've worked around it for now using Yorb's code from his comment above: #9892 (comment)