[Sticky] data-sticky-container height recalc on resize

[designerno1]

maybe data-sticky-container height needs a recalc on resize

[designerno1]

closed it gets resize ;-)

[designerno1]

reopen it sometimes it gets recalced ometimes it seams to update to the initial height

[foodgy]

For me sticky block keep be sticking (huh) only after window resize.
And on page load (F5) sticky block don't follow page scroll at all.

[zurbchris]

Hmm, that should recalc every 10 ms during resize events, not sure what is causing the problems you're having.

[designerno1]

i take a deeper look tomorrow

[andrewfrankel]

+1 on what @foodgy sees. Tried Safari, Chrome, Firefox on a Mac. On initial load sticky behaves erratically (or not at all). Once the browser is resized, works exactly as expected. This includes testing again my own site and the documentation page: http://foundation.zurb.com/sites/docs/sticky.html

Even tired adding sticky through the JS function (Foundation.Sticky) on finalize, incase it were a page load timing issue.

One hacky solution that resolves the issue:

$(window).load(function(){
    $(window).trigger('resize');
});

Happy to provide additional info or testing if needed.

[cpence]

I'm seeing a slightly different behavior. I have a sticky top bar with stickyOn set to medium, and when the window is resized through the medium breakpoint, the height of the data-sticky-container isn't updated, so the content (which in this case is turning from a single row to a stacked top bar) is cut off. Same cluster of bugs, though, I think. Something's off with the resize hook for sticky.

In my case, it works fine if loaded in a small window, and dragged out to medium size, but not if it's loaded in a medium window and dragged in to small size.

[zurbchris]

So, if the viewport is smaller than the minimum stickyOn breakpoint, the calc function kicks out before it starts, thus the failure to resize the container appropriately. I'll take a look at remedying that in the new year, plus some other minor optimizations for sticky.

[andrewfrankel]

@zurbchris, thanks for looking into this! I've also noticed that the width of the sticky content doesn't fix within the column paddings. See screenshot from foundation docs.

BTW, is there a recommended method to force the sticky to recalculate if for example late loading content changes the size (height) of the sticky element?

[zurbchris]

@andrewfrankel sorry for the delay, the answer to your btw question:

$('.sticky').foundation('_calc', true);

[andrewfrankel]

@zurbchris, thanks, but still no luck...

I upgraded to Foundation 6.1.2 and tried out your suggestion including using setTimeout to delay the _calc call and executing manually from the console - neither helped. I'm wondering if my issues (mostly) stem from the fact that I have late loading content (ads, etc) within the sticky element. Could that be causing issues given that the height changes? Is there another approach that should be taken given the late loading content?

[kotyla]

Hi, I have the same problem as @andrewfrankel

width of the .sticky is always c.a. 15px (padding-right?) wider than the container (column)

same at F6 Docs

is it bug or is it on purpose ?

[andycochran]

@andrewfrankel That width bug is addressed in #9298.

[andrewfrankel]

@andycochran thanks for the update!

[kball]

#9298 just got merged, which addresses the width... wondering if the rest of this bug can be addressed by plugging in the data-mutate stuff from #9320 - what do you think @coreysyms

[coreysyms]

@kball @andycochran Seems like its a few different things going on here... but lazy loading images will trigger a mutation event.

[saqueib]

@andycochran @coreysyms @zurbchris I am facing a similar issue, When I am hiding some of the elements inside stikey container using $('.grid-item').hide(), the sticky element is not recalculating height, but when I resize window by mouse, it's updating and fixing the overlap issue.

Is there any other way I can call some method to do the recalculation, I tried triggering window resize but it's not working.

$('.team-filter-nav a').on('click', function(e){
       // filter boxes
        $('#filterable-grid > .grid-item').show().not(filterdBy.replace('#', '.tp-')).hide(200);

        $('.sticky').foundation('_calc', true); // this dont work

        $(window).trigger('resize'); // niether this 
});

[coreysyms]

@saqueib your issue has been addressed here. #9462 although not merged yet, feel free to pull it down.

[saqueib]

@coreysyms I tried pulling updated file from here and build it, now I am getting this error.

foundation.js:8225 Uncaught TypeError: Cannot read property 'on' of undefined
    at Sticky._events (foundation.js:8225)
    at foundation.js:8133
    at fn (vendor.js:4496)
    at dispatch (vendor.js:4737)
    at elemData.handle (vendor.js:4549)

foundation.js:8225 Uncaught TypeError: Cannot read property 'on' of undefined
    at Sticky._events (foundation.js:8225)
    at foundation.js:8133
    at fn (vendor.js:4496)
    at dispatch (vendor.js:4737)
    at elemData.handle (vendor.js:4549)

I am using foundation.min.js?ver=6.2.1 in my final theme, where can I find compiled and min js file.

[coreysyms]

@saqueib sorry, I assumed you were on 6.3.0.
Foundation 6.3.0 is a dependency of the #9462

[JeremyEnglert]

This no longer appears to be an issue. Closing.