Menu icon Foundation
Can I hide Magellan until I reach my first destination?

I am currently using the top bar (which is styled with logo) with a magellan under it. When I scroll the magellan successfully sticks to the top of the screen. What I want is:

I'd love to have the top bar to stick with the magellan simultaneously. I have the sticky class in the top bar but it only works without the magellan.

Also, I want the magellan to be hidden until the first destination is reached on the page.

Is this possible? Please help!

Thank you.

-charlie

Screen shot 2014 01 31 at 10.18.24 am

<!-- start HEADER -->
<div class="contain-to-grid sticky">

    <div id="header">
    
        <div class="row">
        
            <nav class="top-bar" data-topbar>
              
              <ul class="title-area">
                <li><a href="#"><img data-interchange="[image/nss@2x.png, (retina)]" src="images/nss.png" alt="Nimble Software Systems" /></a></li>
              </ul>
    
              <section class="top-bar-section">
                <ul class="right">
                    <li><a href="">News & Events</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Investors</a></li>
                    <li><a href="">Connect</a></li>
                </ul>
              </section>
              
            </nav>
            
        </div>
    
    </div>
    
        <!-- start MAGELLAN -->
        
        <div data-magellan-expedition="fixed">
        
            <div class="row">
        
                <dl class="sub-nav">
                    <dd data-magellan-arrival="arrival"><a href="#arrival">Arrival</a></dd>
                    <dd data-magellan-arrival="destination"><a href="#destination">Destination</a></dd>
                    <dd data-magellan-arrival="js"><a href="#js">JavaScript</a></dd>
                </dl>
            
            </div>
            
        </div>
        
        <!-- end MAGELLAN -->
    
    </div><!-- end HEADER -->
            

         

Magellandestination

I am currently using the top bar (which is styled with logo) with a magellan under it. When I scroll the magellan successfully sticks to the top of the screen. What I want is:

I'd love to have the top bar to stick with the magellan simultaneously. I have the sticky class in the top bar but it only works without the magellan.

Also, I want the magellan to be hidden until the first destination is reached on the page.

Is this possible? Please help!

Thank you.

-charlie

Screen shot 2014 01 31 at 10.18.24 am

<!-- start HEADER -->
<div class="contain-to-grid sticky">

    <div id="header">
    
        <div class="row">
        
            <nav class="top-bar" data-topbar>
              
              <ul class="title-area">
                <li><a href="#"><img data-interchange="[image/nss@2x.png, (retina)]" src="images/nss.png" alt="Nimble Software Systems" /></a></li>
              </ul>
    
              <section class="top-bar-section">
                <ul class="right">
                    <li><a href="">News & Events</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Investors</a></li>
                    <li><a href="">Connect</a></li>
                </ul>
              </section>
              
            </nav>
            
        </div>
    
    </div>
    
        <!-- start MAGELLAN -->
        
        <div data-magellan-expedition="fixed">
        
            <div class="row">
        
                <dl class="sub-nav">
                    <dd data-magellan-arrival="arrival"><a href="#arrival">Arrival</a></dd>
                    <dd data-magellan-arrival="destination"><a href="#destination">Destination</a></dd>
                    <dd data-magellan-arrival="js"><a href="#js">JavaScript</a></dd>
                </dl>
            
            </div>
            
        </div>
        
        <!-- end MAGELLAN -->
    
    </div><!-- end HEADER -->
            

         
Charlie Hinojosa about 5 years ago

Since posting this I've been able to successfully stick the top bar and the magellan. Now I just need to figure out how to hide the magellan.

Peter Surrena about 5 years ago

I add a class to the menu bar container and set it to display:none and then use the following jQuery code to reveal the menu bar after a set pixel count

.floating-nav {display:none}
    $(window).scroll(function() {
      if($(window).scrollTop() >= 550) {  
        $('.floating-nav').fadeIn('fast');
      }else{
        $('.floating-nav').fadeOut('fast');
      }
    });