Menu icon Foundation
Delayed Sticky Topbar

Hi in F5, when using topbar with the sticky attribute, the topbar in question would remain as it was until it was reached in the scroll, at which point it would become sticky.

I can't seem to get that delay with F6, what ever I do the topbar jumps to the top of the window as soon as it detects the slightest scroll. Any ideas?

Thanks

<div class="page" data-sticky-container>  

<header>
  <div class="row">
    <div class="large-12 columns">
    </div>
  </div>
</header>

<nav class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="intro">
  <div class="row">
    <div class="large-12 columns">
      <div data-magellan data-options="barOffset:29;" class="top-bar">
        <ul class="menu">
        <li class="menu-text">Company Name</li>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#residential">Residential Services</a></li>
        <li><a href="#business">Business Services</a></li>
        <li><a href="#about">About Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<section id="intro" data-magellan-target="intro">
  <div class="row">
    <div class="large-12 columns">      
      <h1>Introduction</h1>
    </div>
  </div>
</section>

<section id="residential" data-magellan-target="residential">
  <div class="row">
    <div class="large-12 columns">      
      <h2>Residential Services</h2>
    </div>
  </div>
</section>

<section id="business" data-magellan-target="business">
  <div class="row">
    <div class="large-12 columns"> 
      <h2>Business Services</h2>
    </div>
  </div>
</section>

<section id="about" data-magellan-target="about">
  <div class="row">
    <div class="large-12 columns"> 
      <h2>About Us</h2><p>
     </div>
  </div>
</section>
    
<footer>
  <div class="row">
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
  </div>
</footer>

</div>
            

         

topbarsticky

Hi in F5, when using topbar with the sticky attribute, the topbar in question would remain as it was until it was reached in the scroll, at which point it would become sticky.

I can't seem to get that delay with F6, what ever I do the topbar jumps to the top of the window as soon as it detects the slightest scroll. Any ideas?

Thanks

<div class="page" data-sticky-container>  

<header>
  <div class="row">
    <div class="large-12 columns">
    </div>
  </div>
</header>

<nav class="title-bar" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="intro">
  <div class="row">
    <div class="large-12 columns">
      <div data-magellan data-options="barOffset:29;" class="top-bar">
        <ul class="menu">
        <li class="menu-text">Company Name</li>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#residential">Residential Services</a></li>
        <li><a href="#business">Business Services</a></li>
        <li><a href="#about">About Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<section id="intro" data-magellan-target="intro">
  <div class="row">
    <div class="large-12 columns">      
      <h1>Introduction</h1>
    </div>
  </div>
</section>

<section id="residential" data-magellan-target="residential">
  <div class="row">
    <div class="large-12 columns">      
      <h2>Residential Services</h2>
    </div>
  </div>
</section>

<section id="business" data-magellan-target="business">
  <div class="row">
    <div class="large-12 columns"> 
      <h2>Business Services</h2>
    </div>
  </div>
</section>

<section id="about" data-magellan-target="about">
  <div class="row">
    <div class="large-12 columns"> 
      <h2>About Us</h2><p>
     </div>
  </div>
</section>
    
<footer>
  <div class="row">
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
  </div>
</footer>

</div>
            

         

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

Rafi Benkual almost 4 years ago

You can set the anchor point to either the top or the bottom of an element. By default it's top

So you can try
data-top-anchor="intro:bottom"

We did something like that on this page for example:
http://foundation.zurb.com/upload.html

Jerry Huanna almost 4 years ago

Hello, not sure if you still need help, but this seems to me like an issue I was wondering about few days ago.

Maybe you are trying to achieve this: http://www.simpled.cz/_client/stromoffka/

This worked for me:

Add div#top-anchor and div#bottom-anchor to the bottom of your code (just above /body) and set "position:absolute;top:100px" to the #top-anchor div. The top value should position the #top-anchor to the place from which you want the nav to become sticky. The #bottom-anchor will sit at the bottom of the page so you don't need to position it. Now you have determined the part of the page in which your nav should be sticky (that is all the space between div#top-anchor and div#bottom-anchor) and all you need to do is add data-top-anchor="top-anchor" and data-btm-anchor="bottom-anchor" to the sticky element.

Ben Wills almost 4 years ago

Hi Thanks, it seems that it wont work without the bottom anchor specified? very strange, but working through this helped me solve my issue.