0

Web サイトに粘着性のあるトップバーがあります。ラージとミディアムでは問題なく動作しますが、小さくすると高さが 54 ピクセルになります。class sticky-container を height: 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 に答える