Menu icon Foundation
Foundation 6 Sticky for menus

I'm using sticky to float a menu up and down the page.
The page is a pretty standard layout:

Header across the page

Content Menu track

Footer across the page.

So I give the Content div an id, and wrap the menu in a div with data-sticky-container, and wrap the menu in a div with data-sticky and data-anchor set to the id of the main page.

Now the first thing to pass on is that the demo code in the docs indicates that you add classes of .sticky to the sliding object. I am not sure why is says this, because the sticky.js code seems to add classes for itself to the container and the slider. The .sticky class turns the slider into position:absolute - and this can mean that it doesn't load properly, especially if the slider contains images. So sometimes when you reload, the menu overlaps the footer or the header.

Now this may be a consequence of me setting up foundation in $(document).ready() - and using Safari - which I believe can be a problem because Safari calls the ready function somewhat early.

Anyway, removing the explicit class for the slider and letting the sticky js turn on the class solved some of these problems.
If people have guidance on these issues then I would be grateful to receive it.

Then what happens when the content page is shorter than the slider - and again this is worse if the slider contains images, because sometimes the slider height is evaluated incorrectly because the images haven't loaded.

At the start, because I've removed the sticky class from the slider, the page loads and looks fine. However, one odd thing that I don't understand was that when I reloaded the page using the browser reload button, it just didn;t work properly and the slider was shown over the footer. I am guessing that the slider container was absolute when the page was created. Why there should be some difference between reloading the page - and typing return into the browser address window is a mystery to me.

So, this wasn't reliable enough and after some number of attempts, I've come up with the following, (and I am sure that it could be more elegant). The first thing is to add a private class to the slider - which I've called stickycheck. Then

$(window).on('load resize', function(){
    $('.stickycheck').each(function() { 
        if (Foundation.MediaQuery.atLeast('medium')) {
            // get the id of the content div from the data-anchor setting
            var main = $(this).data('anchor');
            // get our height
            var height = $(this).height();
            // get the height of the main section
            var mainheight = $('#'+main).height();
            if (height > mainheight) {
                $('#'+main).css('height', String(height)+'px');
            }
        }
    });   
});    

The sticky.js code doesn't do stuff for 'small' - and hence the media query to do nothing. Putting it after the window load means that things have had a chance to settle down.

With this add-on, sliding menus are now reliable and the page looks OK.

(Altered on 16th Dec - use min-height instead of height in the css setting - the forum doesn't allow me to change the code it seems)

foundation 6sticky

I'm using sticky to float a menu up and down the page.
The page is a pretty standard layout:

Header across the page

Content Menu track

Footer across the page.

So I give the Content div an id, and wrap the menu in a div with data-sticky-container, and wrap the menu in a div with data-sticky and data-anchor set to the id of the main page.

Now the first thing to pass on is that the demo code in the docs indicates that you add classes of .sticky to the sliding object. I am not sure why is says this, because the sticky.js code seems to add classes for itself to the container and the slider. The .sticky class turns the slider into position:absolute - and this can mean that it doesn't load properly, especially if the slider contains images. So sometimes when you reload, the menu overlaps the footer or the header.

Now this may be a consequence of me setting up foundation in $(document).ready() - and using Safari - which I believe can be a problem because Safari calls the ready function somewhat early.

Anyway, removing the explicit class for the slider and letting the sticky js turn on the class solved some of these problems.
If people have guidance on these issues then I would be grateful to receive it.

Then what happens when the content page is shorter than the slider - and again this is worse if the slider contains images, because sometimes the slider height is evaluated incorrectly because the images haven't loaded.

At the start, because I've removed the sticky class from the slider, the page loads and looks fine. However, one odd thing that I don't understand was that when I reloaded the page using the browser reload button, it just didn;t work properly and the slider was shown over the footer. I am guessing that the slider container was absolute when the page was created. Why there should be some difference between reloading the page - and typing return into the browser address window is a mystery to me.

So, this wasn't reliable enough and after some number of attempts, I've come up with the following, (and I am sure that it could be more elegant). The first thing is to add a private class to the slider - which I've called stickycheck. Then

$(window).on('load resize', function(){
    $('.stickycheck').each(function() { 
        if (Foundation.MediaQuery.atLeast('medium')) {
            // get the id of the content div from the data-anchor setting
            var main = $(this).data('anchor');
            // get our height
            var height = $(this).height();
            // get the height of the main section
            var mainheight = $('#'+main).height();
            if (height > mainheight) {
                $('#'+main).css('height', String(height)+'px');
            }
        }
    });   
});    

The sticky.js code doesn't do stuff for 'small' - and hence the media query to do nothing. Putting it after the window load means that things have had a chance to settle down.

With this add-on, sliding menus are now reliable and the page looks OK.

(Altered on 16th Dec - use min-height instead of height in the css setting - the forum doesn't allow me to change the code it seems)

Rafi Benkual over 3 years ago

Hi Peter-
Thanks for the detailed explanation :) It seems like you have a good understanding of how this works. The sticky plugin has been updated since your post and Chris, one of the Foundation team put together a simple demo here:

http://codepen.io/zurbchris/pen/rxMaoX

We also recently added to a page on the marketing site you can see if helps here:
http://foundation.zurb.com/upload.html