Menu icon Foundation
.sticky / already scrolled page

I'm using the "sticky" class on my top-bar, so I can apply styling depending on whether the page is scrolled (using the "fixed" classes). However, if I refresh an already scrolled page, the "fixed" classes do not get applied. Looking at the examples in the docs, this doesn't seem to be the intended behaviour. What am I missing?

stickyfixedscroll

I'm using the "sticky" class on my top-bar, so I can apply styling depending on whether the page is scrolled (using the "fixed" classes). However, if I refresh an already scrolled page, the "fixed" classes do not get applied. Looking at the examples in the docs, this doesn't seem to be the intended behaviour. What am I missing?

Ivan Luis Britez Peña almost 5 years ago

I have the same problem with Foundation 5. The sticky option is not working.

Here's the code im using.

 ``` <!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="../css/foundation.css" />
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/personal.css" />
    <script src="../js/vendor/modernizr.js"></script>
  </head>
  <body>

<!-- Sección de menú superior -->

    <div class="contain-to-grid sticky">
      <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
      <ul class="title-area"> 
        <li class="name"> 
          <h1><a href="#"><STRONG>COMPANY</STRONG></a></h1> 
        </li>

    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 

        <li class="toggle-topbar menu-icon">
        <a href="#"><span>Menu</span></a>
        </li> 
      </ul> 
      <section class="top-bar-section">

    <!-- Right Nav Section -->

        <ul class="right">
          <li class="active">
            <a href="#">Right Button Active</a>
          </li>
          <li>
            <a href="#">First link in dropdown</a>
          </li> 
        <li class="has-dropdown"> 
            <a href="#">Right Button Dropdown</a> 
            <ul class="dropdown"> 
              <li>
                <a href="#">First link in dropdown</a>
              </li> 
              <li class="active">
                <a href="#">Active link in dropdown</a>
              </li> 
            </ul> 
          </li>              
        </ul> 

    <!-- Left Nav Section --> 

        <ul class="left"> 
          <li>
            <a href="#">Left Nav Button</a>
          </li> 
        </ul> 
      </section> 
      </nav>
    </div>

<!-- Sección de botones -->

      <a href="#" class="button large radius rojo">rojo</a>
      <a href="#" class="button large radius rojoopaco">rojoopaco</a><br>
      <a href="#" class="button large radius amarillo">amarillo</a>
      <a href="#" class="button large radius naranja">naranja</a><br>
      <a href="#" class="button large radius rosado">rosado</a>
      <a href="#" class="button large radius violeta">violeta</a><br>
      <a href="#" class="button large radius verdepastel">verdepastel</a>
    <a href="#" class="button large radius verdeclaro">verdeclaro</a><br>
      <a href="#" class="button large radius celesteoscuro">celesteoscuro</a>
      <a href="#" class="button large radius azul">azul</a><br>
      <a href="#" class="button large radius azuloscuro">azuloscuro</a>
      <a href="#" class="button large radius grisclaro">grisclaro</a><br>
      <a href="#" class="button large radius gris">gris</a>
    <a href="#" class="button large radius grisoscuro">grisoscuro</a><br>
    <a href="#" class="button large radius negro">negro</a>

<br>



    <!-- <script src="../js/foundation/foundation.js"></script> -->
    <script src="../js/vendor/jquery.js"></script>
    <script src="../js/foundation.min.js"></script>
    <script src="../js/foundation/foundation.topbar.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Sam Smith almost 5 years ago

Ivan, I still have no answer for this, but I have created an issue for this on Github https://github.com/zurb/foundation/issues/5910