从垂直中心缩放导航

Question

我正在尝试从垂直中心扩展我的导航（Bootstrap框架）。它会缩放一次“卡住”。到窗口的顶部。它向下缩放时工作正常，但在放大时从左侧缩放。

HTML - 滚动到

时将导航粘到顶部

<script>
  $(document).ready(function() {
  var s = $("#attach");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});
</script>

HTML - 导航代码段

<div id="attach-wrap">
        <div id="attach">
            <div class="navbar-collapse collapse">
                <?php /* Primary navigation */
                    wp_nav_menu( array(
                    'menu' => 'top_menu',
                    'depth' => 2,
                    'container' => false,
                    'menu_class' => 'nav navbar-nav',
                    //Process nav menu using our custom nav walker
                    'walker' => new wp_bootstrap_navwalker())
                    );
                ?>
            </div>
        </div>
    </div>

CSS

#attach-wrap { height: 50px; }

#attach { 
 height: 50px;
 width: 60%;
 margin: 0 auto;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 -webkit-transition: height 0.35s ease, width 0.35s ease;
 -moz-transition: height 0.35s ease, width 0.35s ease;
 -ms-transition: height 0.35s ease, width 0.35s ease;
 -o-transition: height 0.35s ease, width 0.35s ease;
 transition: height 0.35s ease, width 0.35s ease; 
}

#attach.stick { 
 height: 80px; 
 width: 100%;
 border-bottom: 1px solid #000;
 background-color: rgba(250,250,250,1);
}

#attach.stick .nav>li>a {
 line-height: 80px; 
}

.stick {
 position: fixed;
 z-index: 100;
 width: 100%;
 top: 0; left: 0;
}