php - 堆叠多个粘性元素

Question

我正在创建一个网站，但遇到了一些问题。

网址是test.scorpiontv.com .到目前为止，根据主题(Reel by WPZoom)，我们有粘性的主导航菜单。我还想让“我们的计划”分类栏保持粘性，这样一旦我们向下滚动，类别仍然可见(但网站的主导航也仍然可见)。我试过摆弄代码，但似乎没有任何效果。我真的很感激这方面的任何帮助。

谢谢!

这是投资组合排序效果的代码:

<div class="inner-wrap">

    <section class="portfolio-archive">

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

            <section class="home_section">

                <?php the_title( '<h2 class="section-title">', '</h2>' ); ?>

                <div class="entry-header-excerpt"><?php the_content(); ?></div>

                <nav class="portfolio-archive-taxonomies">
                    <ul class="portfolio-taxonomies portfolio-taxonomies-filter-by">
                        <li class="cat-item cat-item-all current-cat"><a href="<?php echo get_page_link( option::get( 'portfolio_url' ) ); ?>"><?php _e( 'All', 'wpzoom' ); ?></a></li>

                        <?php wp_list_categories( array( 'title_li' => '', 'hierarchical' => true,  'taxonomy' => 'portfolio', 'depth' => 1 ) ); ?>
                    </ul>

                </nav>

            </section>

        <?php endwhile; // end of the loop. ?>


        <?php
        $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

        $args = array(
            'post_type'      => 'portfolio_item',
            'posts_per_page' => -1,
        );

        $wp_query = new WP_Query( $args );

        $col_number = option::get('portfolio_grid_col');

        ?>

        <?php if ( $wp_query->have_posts() ) : ?>

            <div class="portfolio-grid col_no_<?php echo $col_number; ?>">

                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

                    <?php get_template_part( 'portfolio/content' ); ?>

                <?php endwhile; ?>

            </div>

            <?php get_template_part( 'pagination' ); ?>

        <?php else: ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

    </section><!-- .portfolio-archive -->

</div>

这是您在其中查看投资组合的主页的代码:

 <?php if ( option::is_on( 'featured_posts_show' ) ) : ?>

    <div class="slider-wrap">

        <?php get_template_part( 'wpzoom-slider' ); ?>

    </div>

 <?php endif; ?>

 <div class="inner-wrap">

    <section class="portfolio-archive">

        <section class="home_section">

            <h2 class="section-title"><?php _e('Our Programmes', 'wpzoom'); ?></h2>

            <nav class="portfolio-archive-taxonomies" >
                 <ul class="portfolio-taxonomies portfolio-taxonomies-filter-by">
                     <li class="cat-item cat-item-all current-cat"><a href="<?php echo get_page_link( option::get( 'portfolio_url' ) ); ?>"><?php _e( 'All', 'wpzoom' ); ?></a></li>

                     <?php wp_list_categories( array( 'title_li' => '', 'hierarchical' => true,  'taxonomy' => 'portfolio', 'depth' => 1 ) ); ?>
                </ul>

            </nav>

        </section>


             <?php
             $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;

             $args = array(
                 'post_type'      => 'portfolio_item',
                 'posts_per_page' => -1,
             );

             $wp_query = new WP_Query( $args );

             $col_number = option::get('portfolio_grid_col');

             ?>

             <?php if ( $wp_query->have_posts() ) : ?>

                <div class="portfolio-grid col_no_<?php echo $col_number; ?>">

                     <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

                         <?php get_template_part( 'portfolio/content' ); ?>

                     <?php endwhile; ?>

                 </div>

                 <?php get_template_part( 'pagination' ); ?>

             <?php else: ?>

                 <?php get_template_part( 'content', 'none' ); ?>

             <?php endif;

             wp_reset_query();
             ?>


     </section><!-- .portfolio-archive -->

 </div>

Answer 1

我是您使用的 Reel 主题的作者。

这是适合您的解决方案:

添加以下 PHP 代码(通过 My Custom Functions 等插件)或子主题和 CSS:

@media (min-width: 980px) {

    .filter-not-top {
        position: fixed;
        top: 80px;
        border: none;
        width: 100%;
        background: #fff;
        height: 55px;
        z-index: 100;
        padding-top: 10px !important;
    }
}

    function reel_fix_categories(){
    ?>
    <script>

        (function ($) {
            'use strict';

            var $document = $(document);
            var $window = $(window);

            $(function() {
                var header = $(".portfolio-archive-taxonomies");
                $(window).scroll(function() {
                    var scroll = $(window).scrollTop();

                    if (scroll >= 950) {
                        header.removeClass('clearHeader').addClass("filter-not-top");
                    } else {
                        header.removeClass("filter-not-top").addClass('clearHeader');
                    }
                });
            });

        })(jQuery);

    </script>
    <?php
    }
    add_action('wp_footer', 'reel_fix_categories');

您可以在此视频中看到结果:http://jmp.sh/U6bqXoA

希望这对您有所帮助。