Menu icon Foundation
Fixed Position Div Pops From Grid

I've run into a problem with Foundation 5. If I want to use position:fixed on a div that is part of the Foundation Grid, it pops it out of the grid and aligns with the left edge of the row. Is there a work around for this? How do I keep it in place?

 <div id="right" class="medium-4 columns show-for-medium-up" >
    <dl class="tabs" data-tab>
        <dd class="active"><a href="#recent">Recent</a></dd>
        <dd><a href="#popular">Popular</a></dd>                         
    </dl>
    <div class="tabs-content">
        <div class="content active" id="recent">
            <ul>
                <?php
                    $query= new WP_Query();
                    $query->query(array('posts_per_page'=>10));
                    while ($query->have_posts()) : $query->the_post();
                ?>

                    <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>

                <?php endwhile; wp_reset_query();?>

            </ul>
        </div><!-- END .content -->
        <div class="content" id="popular">
            Popular posts
        </div>
    </div><!-- END .tabs-content -->
 </div><!-- END #right -->


 <script>
 $(document).scroll(function() {
     var y = $(document).scrollTop(), right = $("#right");
     if(y >= 160)  {
         right.css({position: "fixed"});
     } else {
         right.css({position: "relative"});
     }
 });
 </script>
            

         

gridcss

I've run into a problem with Foundation 5. If I want to use position:fixed on a div that is part of the Foundation Grid, it pops it out of the grid and aligns with the left edge of the row. Is there a work around for this? How do I keep it in place?

 <div id="right" class="medium-4 columns show-for-medium-up" >
    <dl class="tabs" data-tab>
        <dd class="active"><a href="#recent">Recent</a></dd>
        <dd><a href="#popular">Popular</a></dd>                         
    </dl>
    <div class="tabs-content">
        <div class="content active" id="recent">
            <ul>
                <?php
                    $query= new WP_Query();
                    $query->query(array('posts_per_page'=>10));
                    while ($query->have_posts()) : $query->the_post();
                ?>

                    <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>

                <?php endwhile; wp_reset_query();?>

            </ul>
        </div><!-- END .content -->
        <div class="content" id="popular">
            Popular posts
        </div>
    </div><!-- END .tabs-content -->
 </div><!-- END #right -->


 <script>
 $(document).scroll(function() {
     var y = $(document).scrollTop(), right = $("#right");
     if(y >= 160)  {
         right.css({position: "fixed"});
     } else {
         right.css({position: "relative"});
     }
 });
 </script>
            

         
Wing-Hou Chan about 5 years ago

Hey Peter!

Take a look at the Pen I made for the solution posed in this thread: http://foundation.zurb.com/forum/posts/2862-adsense-and-others-ads-with-grid--how-to-implement

It'll get you going.