2017-04-05 11 views
0

固定ヘッダー(ロゴとナビゲーションバーを含む)を持つWordPressテーマをカスタマイズし、すべてデスクトップのChromeでうまく動作します。しかし、携帯電話で見ると、ページを下にスクロールすると、ヘッダーが〜20ピクセル分カットされます。固定ヘッダーが携帯電話で切断される

オーバーヘッドを追加してさまざまな要素に固定高さを設定しようとしました:auto、さらには行の高さ:.headerに90px。ただし、何も動作しないようです。助けてください

(function($) { 
    'use strict'; 

    var $body = $('body'); 
    var $header = $('.header', $body); 
    var $headerSpacer = $('.header-spacer', $body); 
    var $offcanvas = $('.offcanvas', $body); 
    var $adminbar = $('#wpadminbar', $body); 

    $(document).on('ready', function() { 
     $adminbar = $('#wpadminbar', $body); 
    }); 

    var adaptHeaderSpacerTimeout = null; 
    var nothing = null; 
    var $headerHeight = $header.outerHeight(); 
    var adaptHeaderSpacer = function() { 
     if (adaptHeaderSpacerTimeout !== null) { 
      clearTimeout(adaptHeaderSpacerTimeout); 
     } 

     setTimeout(function() { 
      nothing = $header[0].offsetHeight; 
      $headerHeight = $header.outerHeight(); 
      $headerSpacer.css('height', $headerHeight + 'px'); 
      if ($body.hasClass('admin-bar') && $adminbar.length) { 
       $offcanvas.css('top', ($headerHeight + $adminbar.outerHeight()) + 'px'); 
      } 
      else { 
       $offcanvas.css('top', $headerHeight + 'px'); 
      } 
     }, 400); 
    }; 
    adaptHeaderSpacer(); 

    $('img', $header).on('load', adaptHeaderSpacer); 
    $(document).on('ready', adaptHeaderSpacer); 
    $(window).on('resize orientationchange', adaptHeaderSpacer); 

    // Full-screen navigation 
    var $offcanvasToggle = $('.offcanvas-toggle'); 
    $offcanvas = $('.offcanvas'); 
    $offcanvasToggle.on('click', function() { 
     $offcanvas.toggleClass('offcanvas--active'); 
     $offcanvasToggle.toggleClass('offcanvas-toggle--active'); 

}); 

<body <?php body_class(); ?>> 
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e('Skip to content', 'pine'); ?></a> 

    <div class="offcanvas"> 
     <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false)); ?> 
    </div><!-- /.offcanvas --> 

    <header class="header animated bounceInDown"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-6"> 

        <?php pine_logo(); ?> 
       </div><!-- /.col --> 

       <div class="col-xs-6"> 
        <button class="offcanvas-toggle"> 
         <span></span> 
         <span></span> 
         <span></span> 
        </button><!-- /.main nav toggle --> 
       </div><!-- /.col --> 
      </div><!-- /.row --> 
     </div><!-- /.container --> 
    </header><!-- /.header --> 

    <?php if (! is_404()) : ?> 
    <div class="header-spacer"></div><!-- /.header spacer --> 
    <?php endif; ?> 

    <div id="content"> 

関連するCSS:

.header { 
    position: fixed; 
    width: 100%; 
    background-color: #fff; 
    padding: 20px 0; 
    z-index: 10000; 
} 
.header-spacer { 
    min-height: 90px; 
} 

関連のjavascript

サイトhttp://nadjapavic.com

関連htmlです。

+0

JavaScriptが 'setheadout'を使って' .header'( '$ header')を調整する方法は、間違いなく**間違いです。 '.header-spacer 'と' .offcanvas'の両方は無関係です。もっと助けてもらえませんが、それは出発点です。 –

答えて

0

あなたはブートストラップまたは同様のグリッドシステムを使用しているようです。これらのシステムでは、.rowは、.containerをラップする必要があります。 #contentcontainerクラスを追加します。 .containerの不足は、.rowを大きくして、bodyを大きくして、あなたに見える効果を与えます。

+0

はい、あなたは正しく、の中のすべてのものの周りに.container-fluidを追加して動作させました。ありがとうございました! –

関連する問題