Foundation-sites: [Off-canvas] Foundation 6.3.1 : Non Sticky Top Bar inside Off Canvas Content

[hari03]

I have been trying to make the title-bar or any element for that instance to be sticky inside my off-canvas-content container.

How to reproduce this bug:

1. Copy the off-canvas boilerplate code from Zurb F6 Off Canvas Documentation
2. Inside the <div> with class = "off-canvas-content" , copy paste the _Sticky Navigation_ (with title-bar on top) boilerplate code from Zurb F6 Sticky Documentation.
3. Include external css,js and jquery references.

What should happen:

The title-bar _should be_ sticky when page is scrolled down.

What happened instead:

The title-bar gets scrolled along with the page contents.

Browser(s) and Device(s) tested on:

• Google Chrome Version 58.0.3029.110

• Mozilla Firefox Version 23.0.1

  Foundation Version used :

• foundation.min.js : 6.3.1

• foundation.min.css : 6.3.1

jQuery version used :

• jquery.min.js - 2.2.4

Test case link:

• Link to jsFiddle

[IamManchanda]

Let me check and get back to you!

[hari03]

Any update on resolving the issue?

[IamManchanda]

@hari03 Oh dang sorry i got busy in other stuff after adding test case.
Now also busy with some stuff... But i will look into it... in coming week...
Appologies for the delay!

[SassNinja]

This issue it caused by the transform scope of the off-canvas container.
I've made a PR that adds the possibility to preserve the sticky behavior:
https://github.com/zurb/foundation-sites/pull/10381

[cernfortech]

Hi, I've got the same issue after upgrade Foundation from version 6.3.1 to 6.4.1
I initialize sticky-header by JS:

$(document).foundation();

    if ($('.header-row').length > 0) {
        $('.header').attr('data-sticky-container', '');
        var sticky = new foundation.Sticky($('.header-row'), {topAnchor: "headerRow:bottom", marginTop: 0});

        $('.header-row').on('sticky.zf.stuckto:top', function(){
          $('body').addClass('is-sticky');
        }).on('sticky.zf.unstuckfrom:top', function(){
          $('body').removeClass('is-sticky');
        });
    }

and get such html output:

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper="">
        <div class="off-canvas-content" data-off-canvas-content="">
            <div class="page-wrapper">
                <header class="page-header">
                    <div class="header content sticky-container" data-sticky-container="" style="height: 120px;">
                        <div class="header-row show-for-xmedium sticky is-anchored is-at-top" id="headerRow" data-resize="headerRow" data-mutate="headerRow" data-e="z46y7s-e" style="margin-top: 0px; bottom: auto; top: 0px; max-width: 1326px;" data-events="mutate">
                             ...
                        </div>
                    </div>
                </header>
            </div>
        </div>
    </div>
</div>

But class .is-stuck is not assigned proper on div.header-row . The same for body.is-sticky

PS. Offcanvas sidebar is initialized by data-attributes.

[doertedev]

Let me cross-link this to the actual open PR -> #10408 - since @SassNinja's mentioned PR was closed due to branch naming.

[DanielRuf]

Closing as resolved - the merged PR should fix this.