So I am having an issue getting the Foundation 6 Sticky sidebar to work when placing a data-anchor on the sidebar. When I set up my sidebar without data-anchors it works just fine anchored to the top of the page at all times. However, I need it to become sticky after you scroll past page banner not before. I have gone through the documentation over and over again, checked blogs and threads here and can’t figure out what I’m doing wrong here.

Here is the code that is working without the anchor:

<div class="row">

  <div class="small-12 large-8 large-push-4 columns content_area" id="anchor-to-this">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <p><?php the_content(); ?></p>        

    <?php endwhile; else : ?>

      <p><?php _e( 'Sorry, no results found.', 'hmfcc' ); ?></p>

    <?php endif; ?>  

  </div>

  <div class="small-12 large-3 large-pull-9 columns sidebar" data-sticky-container>
      <div class="sticky" data-sticky>
          <div class="hours_sidebar">
              <div class="column row">
                  <h6>Hours</h6>
                  <div class="bar"></div>
                  <?php if( have_rows('hours_sidebar', 'option') ): while ( have_rows('hours_sidebar', 'option') ) : the_row(); ?>          

                   <p><span class="day"><?php the_sub_field('days_of_the_week'); ?></span> <span class="time"><?php the_sub_field('times'); ?></span></p>

                <?php endwhile; endif; ?>
            </div>
          </div>
          <div class="call">
              <div class="row">
                  <div class="small-2 columns">
                      <img src="<?php the_field('call_icon', 'option'); ?>">
                  </div>
                  <div class="small-10 columns">
                        <p><?php the_field('call_text', 'option'); ?></p>
                  </div>
              </div>
              <div class="column row">
                  <span class="number"><?php the_field('call_number', 'option'); ?></span>
              </div>
          </div>
      </div>
  </div>

</div>

Here is the code that is not working WITH the anchor:

<div class="row">

  <div class="small-12 large-8 large-push-4 columns content_area" id="anchor-to-this">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <p><?php the_content(); ?></p>        

    <?php endwhile; else : ?>

      <p><?php _e( 'Sorry, no results found.', 'hmfcc' ); ?></p>

    <?php endif; ?>  

  </div>

  <div class="small-12 large-3 large-pull-9 columns sidebar" data-sticky-container>
      <div class="sticky" data-sticky data-anchor="anchor-to-this">
          <div class="hours_sidebar">
              <div class="column row">
                  <h6>Hours</h6>
                  <div class="bar"></div>
                  <?php if( have_rows('hours_sidebar', 'option') ): while ( have_rows('hours_sidebar', 'option') ) : the_row(); ?>          

                   <p><span class="day"><?php the_sub_field('days_of_the_week'); ?></span> <span class="time"><?php the_sub_field('times'); ?></span></p>

                <?php endwhile; endif; ?>
            </div>
          </div>
          <div class="call">
              <div class="row">
                  <div class="small-2 columns">
                      <img src="<?php the_field('call_icon', 'option'); ?>">
                  </div>
                  <div class="small-10 columns">
                        <p><?php the_field('call_text', 'option'); ?></p>
                  </div>
              </div>
              <div class="column row">
                  <span class="number"><?php the_field('call_number', 'option'); ?></span>
              </div>
          </div>
      </div>
  </div>

</div>

I can see that the data attributes are applied to the divs upon inspection so I know the code is somewhat working but on scroll nothing is added. For example, it is supposed to have class=”is-anchored is-at-top” added on load and class=”is-at-top is-stuck” added on scroll, and neither of these are happening.

It’s frustrating that the documentation for Foundation has so little explanation.

Here is my development link for reference: http://preview.bluekeyinteractive.com/hmfcc/build/styles/

Read more here: Foundation 6 Sticky Sidebar Not Working


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: