html - Foundation 6 Sticky Topbar 在小浏览器调整大小时表现不正常

Question

我的网站上有一个粘性顶部栏。它在 Large 和 Medium 上工作正常，但当它变小时，它会发展出 54px 的高度。我将 class sticky-container 设置为 height: 0;如果我刷新浏览器，它就会工作。当我离开并再次返回时，54px 的差距再次出现。有任何想法吗？谢谢-Adolfo

HTML:

    <!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar" id="nav-menu">
            <div class="logo-wrapper hide-for-small-only">
                <div class="logo">
                    <img src="/assets/img/fingerLogoSM.2.gif">
                </div>
            </div>
            <!-- Left Nav Section -->
            <div class="top-bar-left">
                <ul class="vertical medium-horizontal menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </div>
            <!-- Right Nav Section -->
            <div class="top-bar-right">
                <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Technologies Used...</a>
                        <ul class="submenu menu vertical medium-verticle" data-submenu>
                            <li><a href="foundation.html">Foundation</a></li>
                            <li><a href="html5.html">HTML5</a></li>
                            <li><a href="css3.html">CSS3</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="wordpress.html">WordPress</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

CSS:

    /* Small Navigation */
.logo-small {
  float: right;
  padding: 4px; }

.title-bar {
  padding: 0 .5rem;
  background-color: #3D3242; }

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
  padding: 4px; }

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
  .logo-wrapper {
    position: relative; }
  .logo-wrapper .logo {
    width: 92px;
    height: 92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -6px;
    margin-left: -46px; }
  .top-bar-right {
    width: 50%;
    padding-left: 60px; }
  .top-bar-right ul {
    float: left; }
  .top-bar-left {
    width: 50%;
    padding-right: 60px; }
  .top-bar-left ul {
    float: right; } }

我的网址是http://adolfobarreto.atwebpages.com

Answer 1

正如我在评论中所说，您可以隐藏 div。

您可以使用基础可见性类

只需添加类

hide-for-small-only

在粘性 div 上。更多信息可以在这里找到:http://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html

或者你可以使用媒体查询

@media screen 
and (max-width : 640px) {
    .sticky-container{display:none;}
}

当屏幕宽度小于 640px 时，这将隐藏 div；