Menu icon Foundation
6.4.1 sticky issues

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 my code...

<div data-sticky-container>
  <div class="sticky" data-sticky data-options="marginTop:0; stickyOn: small;" > 
    <header >
          <nav class="grid-container">
            <div class="grid-x grid-x-padding">
              <div class="cell">
                <!-- topbar -->
                <div id="mainnav">
                  <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                  </div>
                  <div class="top-bar" id="responsive-menu">
                    <div class="top-bar-right">
                      <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-animate-height="true" data-auto-height="true">
                        <li><a class="active" href="index.html">Home</a></li>
                        <li><a href="overons.html">Over ons</a></li>
                        <li><a href="corian.html">Corian®</a></li>
                        <li><a  href="algemeen.html">Jobs</a></li>
                        <li><a href="algemeen.html">Service</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li id="navsocial"> | 
                          <a href="#" target="_blank"><i class="fa fa-facebook-square"></i></a>
                          <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <section class="grid-x grid-padding-x align-middle">
              <div class="medium-3 cell">
                <div class="grid-x grid-padding-x align-center">
                    <div class="small-8 medium-12 cell">
                      <a href="index.html" class="svgimage"><img src="images/vdi_logo.svg" alt="vdi design" id="logo"></a>
                    </div>
                </div>
                
              </div>
              <div class="medium-9 cell" id="subnav">
                  <a href="keuken.html">keuken</a>
                  <a href="keuken.html">badkamer</a>
                  <a href="keuken.html">interieur</a>
                  <a href="keuken.html">totaalconcept</a>
                  <a href="professional.html">professional</a>
              </div>
            </section>
          </nav>
        </header>
  </div>
</div>

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); 

Does anybody have a decent working solution for a sticky header... in previous versions it was working much better, but i really like the 6.4. release and don't like to go back!

grtz,

guy

 

stickytitlebartopbar6.4

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 my code...

<div data-sticky-container>
  <div class="sticky" data-sticky data-options="marginTop:0; stickyOn: small;" > 
    <header >
          <nav class="grid-container">
            <div class="grid-x grid-x-padding">
              <div class="cell">
                <!-- topbar -->
                <div id="mainnav">
                  <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                  </div>
                  <div class="top-bar" id="responsive-menu">
                    <div class="top-bar-right">
                      <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-animate-height="true" data-auto-height="true">
                        <li><a class="active" href="index.html">Home</a></li>
                        <li><a href="overons.html">Over ons</a></li>
                        <li><a href="corian.html">Corian®</a></li>
                        <li><a  href="algemeen.html">Jobs</a></li>
                        <li><a href="algemeen.html">Service</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li id="navsocial"> | 
                          <a href="#" target="_blank"><i class="fa fa-facebook-square"></i></a>
                          <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <section class="grid-x grid-padding-x align-middle">
              <div class="medium-3 cell">
                <div class="grid-x grid-padding-x align-center">
                    <div class="small-8 medium-12 cell">
                      <a href="index.html" class="svgimage"><img src="images/vdi_logo.svg" alt="vdi design" id="logo"></a>
                    </div>
                </div>
                
              </div>
              <div class="medium-9 cell" id="subnav">
                  <a href="keuken.html">keuken</a>
                  <a href="keuken.html">badkamer</a>
                  <a href="keuken.html">interieur</a>
                  <a href="keuken.html">totaalconcept</a>
                  <a href="professional.html">professional</a>
              </div>
            </section>
          </nav>
        </header>
  </div>
</div>

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); 

Does anybody have a decent working solution for a sticky header... in previous versions it was working much better, but i really like the 6.4. release and don't like to go back!

grtz,

guy

 

This post has been closed. No new replies can be added.

Michael Seelisch 2 months ago

Just add data-sticky-on="small" to your div.

Guy Van Bael 2 months ago

it's already in the data-options...

Michal Pandyra 2 months ago

Hi Guy,

What's happening when the Sticky plug-in intitializes? Does it make the changes to the various elements (adds a unique ID to "data-sticky", adds the necessary classes, etc.) but neglects to calculate initial stickiness?

If so, I wonder if it isn't related to this bug: https://github.com/zurb/foundation-sites/issues/10505

Can you see if the workaround I've added has any effect on your script? It catches the "init.zf.sticky" event when the Sticky plugin is first initialized and forces it to re-calculate.

Guy Van Bael 2 months ago

Hi Michael,

It seems to make the changes...

Michal Pandyra 2 months ago

Thanks Guy, I've updated the issue on GitHub to hopefully gain some traction.

Guy Van Bael about 1 month ago

Issue is fixed in 6.4.3