Question

我遇到了基础5的问题。如果我想在基础网格的position:fixed上使用div，它会将其从网格中弹出并与行的左边缘。有解决方法吗？

 <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

据我了解，您想创建一个sticky顶部栏（固定导航或包含网格），因此当用户滚动到底部时，该栏会显示您最近和最受欢迎的帖子。

通过阅读documentation了解如何完成。

基础5 - 固定位置div弹出网格

1 个答案: