Sticky Top Bar过渡问题

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> 

我的萨斯文件包含以下内容：

$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-paddin克和$topbar-sticky-shrink-padding-stuck相同垫。