0

我的网站上有一个粘性顶栏。它在大型和中型上都可以正常工作，但是当它变小时，它会产生 54px 的高度。我将类粘性容器设置为高度：0；如果我刷新浏览器，它就可以工作。当我离开并再次返回时，54px 的间隙再次出现。有任何想法吗？谢谢-阿道夫

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

4

1 回答 1

2

就像我在评论中说的，你可以隐藏 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；

于 2016-01-12T20:07:39.910 回答