Menu icon Foundation
Sticky add class at div scroll

I must have read every post and article on foundation sticky top-bar for this and still no luck.

 

I have a sticky top-bar, I have a div below it set to 100% width & height with parallax content. 

I'm looking to add a class to top-bar as the bottom of the full height div passes it.

 

Currently I have this all set up except the class changes on scroll position rather than being triggered by the desired div element.

Here's a codepen

 

classsticky

I must have read every post and article on foundation sticky top-bar for this and still no luck.

 

I have a sticky top-bar, I have a div below it set to 100% width & height with parallax content. 

I'm looking to add a class to top-bar as the bottom of the full height div passes it.

 

Currently I have this all set up except the class changes on scroll position rather than being triggered by the desired div element.

Here's a codepen

 

Rafi Benkual over 3 years ago

There are some events the Sticky plugin emits that you can add or remove classes with.

Example

$('.top-bar').on('sticky.zf.stuckto:top', function(){
  $(this).addClass('shrink');
}).on('sticky.zf.unstuckfrom:top', function(){
  $(this).removeClass('shrink');
})

You can see it in action here: http://codepen.io/rafibomb/pen/wGPVRw

Adapted from our tutorial http://zurb.com/university/lessons/create-a-menu-that-sticks

Jonny Wood over 3 years ago

 Thanks Rafi,

 

The stuckto:top event wasn't right for my needs. This is what I've got as a solution so far, only issue with it currently is if the browser window gets resized.

HTML:

<header id="navigation" class="header sticky-container" data-sticky-container role="banner">


  <div data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small; btmAnchor: content:bottom;">
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text"><a href="<?php echo home_url(); ?>">Site</a></li>
        </ul>
      </div>
      <div class="top-bar-right">
      </div>
    </div>
  </div>

</header>
<!-- end .header -->

<div id="onscreen">
  <div class="parallax-background">
    <div class="intro-text">
      Parralax
      <p><i class="fi-arrow-down"></i></p>
    </div>
  </div>

</div>

<div id="content">
</div>

 

JS:

// This works but not with window resize
  var nav = jQuery("#navigation");
  var content = jQuery("#content").offset();

  jQuery(window).scroll(function(){
       var screenPosition = jQuery(document).scrollTop() + 100;
        if (screenPosition < content.top) {
            nav.removeClass( "shrink" );
        }
        if (screenPosition >= content.top) {
            nav.addClass("shrink");
        }
    });