粘性顶栏过渡问题

Question

我使用Foundation 6创建了一个粘性标题，但是它不接受过渡，因此很奇怪。顶栏看起来很生涩。任何人都可以帮忙，让我知道问题所在。我不确定以下缺少什么。以下是我的代码：

<header class="site-header" role="banner">
   <div class="site-title-bar title-bar" <?php foundationpress_title_bar_responsive_toggle() ?> data-responsive-toggle="example-menu" data-hide-for="large">
      <div class="title-bar-left">
         <button class="menu-icon" type="button" data-toggle="example-menu off-canvas-menu"></button>
      </div>
   </div>
   <div class="mobile-logo">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" alt="Logo" width="HERE" height="HERE" /></a>
   </div>
   <div class="top-bar-container" data-sticky-container>
      <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%; z-index:2">
         <nav class="site-navigation top-bar topbar-sticky-shrink row columns align-middle" id="example-menu" role="navigation">
            <div class="row align-middle">
               <div class="columns small-12">
                  <?php foundationpress_utility_bar(); ?>
               </div>
            </div>
            <div class="row align-middle main-nav">
               <div class="top-bar-left columns">
                  <div class="site-desktop-title top-bar-title">
                     <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.png" alt="Logo" width="368" height="61" /></a>
                  </div>
               </div>
               <div class="top-bar-right columns">
                  <?php foundationpress_top_bar_r(); ?>
                  <?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
                  <?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
                  <?php endif; ?>
               </div>
            </div>
         </nav>
      </div>
   </div>
   <div class="row align-center cta">
      <div class="columns medium-4 small-12">
         <a href="#" ">
            <div class="button button-primary "><img src="<?php echo get_template_directory_uri(); ?>/assets/images/icon-apply.png" alt="Logo" width="26" height="29" />&nbsp;Apply today
            </div>
         </a>
      </div>
      <div class="columns medium-4 small-12">
         <a href="#" ">
            <div class="button button-secondary "><img src="<?php echo get_template_directory_uri(); ?>/assets/images/icon-tour.png" alt="Logo" width="39" height="29" />&nbsp;Book a tour</div>
         </a>
      </div>
      <div class="columns medium-4 small-12">
         <a href="#" ">
            <div class="button button-tertiary "><img src="<?php echo get_template_directory_uri(); ?>/assets/images/icon-donate.png" alt="Logo" width="35" height="29" />&nbsp;Make a donation</div>
         </a>
      </div>
   </div>
</header>

我的Sass文件包含以下内容：

$topbar-sticky-shrink-padding: 1rem 0; // controls the un-stuck height of topbar
$topbar-sticky-shrink-padding-stuck: 0; // controls the is stuck height of topbar
$topbar-sticky-shrink-bg: #2c3840;

.sticky {
    background-color: $white;
}

.topbar-sticky-shrink {
  padding:$topbar-sticky-shrink-padding;
  transition: padding 0.25s ease;

  .menu {
  }
}

.is-stuck .topbar-sticky-shrink {
  padding: $topbar-sticky-shrink-padding-stuck;
  transition: padding 0.25s ease;
}

Answer 1

修复是为$topbar-sticky-shrink-padding和$topbar-sticky-shrink-padding-stuck提供相同的填充。