css - Foundation 5 - 固定位置 div 从网格中弹出

Question

我遇到了 Foundation 5 的问题。如果我想在作为 Foundation Grid 一部分的 div 上使用 position:fixed，它会弹出超出网格并与行的左边缘对齐。有解决办法吗？

 <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>

Answer 1

据我了解，您想创建一个粘性顶部栏(固定导航或包含到网格)，因此当用户滚动到底部时，该栏将显示您最近和热门的帖子。

通过阅读 documentation 查看应该如何完成.