Menu icon Foundation
6.4.x - Sticky Problem

Hi,

Not sure the sticky functionality is workig in the latest versions... 6.4.0 or 6.4.1

My code, that was working, is:

<div id="stickynavanchor">
    <div data-sticky-container>
        <div class="full-width menu-bg sticky" data-sticky data-sticky-on="small" data-anchor="stickynavanchor" data-margin-top="0">
            <div class="row">
                <div class="small-12 columns">
                    <div id="menu" class="show-for-medium">
                        <!--menu panel--><a href='/'><i class='menu-logo fi-home'></i></a><ul class="menu dropdown" id="top-menu" data-dropdown-menu><li class="home-link show-for-large"><a href="/">Home</a></li></ul><!-- end of menu panel -->
                    </div>
                    <div class="small-menu">
                        <a href='/'><i class="fi-home menu-logo-always hide-for-medium"></i></a>
                        <h3 class="hide-for-medium">Labour Control System</h3>
                        <div class="hamburger-toggle hide-for-medium" data-toggle="offCanvasRight">
                            <button class="menu-icon dark" type="button"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

From here - the rest of the page.... and the #stickynavanchor is closed later down the page.

 

I've tried listening for the new events:

$('.menu-bg').on('stuckto.zf.sticky', function()
{
    console.log('stuck');
});

 

But they don't fire either.....

 

This used to work in 6.3.x

 

I don't want to have to downgrade though...

 

Any ideas?

Thanks in advance,

Peter

sticky

Hi,

Not sure the sticky functionality is workig in the latest versions... 6.4.0 or 6.4.1

My code, that was working, is:

<div id="stickynavanchor">
    <div data-sticky-container>
        <div class="full-width menu-bg sticky" data-sticky data-sticky-on="small" data-anchor="stickynavanchor" data-margin-top="0">
            <div class="row">
                <div class="small-12 columns">
                    <div id="menu" class="show-for-medium">
                        <!--menu panel--><a href='/'><i class='menu-logo fi-home'></i></a><ul class="menu dropdown" id="top-menu" data-dropdown-menu><li class="home-link show-for-large"><a href="/">Home</a></li></ul><!-- end of menu panel -->
                    </div>
                    <div class="small-menu">
                        <a href='/'><i class="fi-home menu-logo-always hide-for-medium"></i></a>
                        <h3 class="hide-for-medium">Labour Control System</h3>
                        <div class="hamburger-toggle hide-for-medium" data-toggle="offCanvasRight">
                            <button class="menu-icon dark" type="button"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

From here - the rest of the page.... and the #stickynavanchor is closed later down the page.

 

I've tried listening for the new events:

$('.menu-bg').on('stuckto.zf.sticky', function()
{
    console.log('stuck');
});

 

But they don't fire either.....

 

This used to work in 6.3.x

 

I don't want to have to downgrade though...

 

Any ideas?

Thanks in advance,

Peter

Scot Meyer over 1 year ago

Current documentation reads stuckto.zf.sticky but the javascript raises "sticky.zf.stuckto:" + stickTo

So this will work.

$(document).on('sticky.zf.stuckto:top', 
  function () {
     console.log('stuck');
  }
);

Or if you have multiple stickies use the element id of the container.

$("#elementid").on('sticky.zf.stuckto:top',
  function () {
     console.log('stuck');
  }
);