固定標頭在手機上被切斷

我自定義了一個WordPress主題，其中包含一個固定標題（包括徽標和導航欄），並且在桌面版Chrome上一切正常。但是，在手機上觀看時，當您向下滾動頁面時，標題會被截斷約20px。固定標頭在手機上被切斷

我試着給各種元素設置固定的高度，將overflow：auto，甚至line-height：90px添加到.header，但似乎沒有任何效果。

相關的html：

<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：

(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'); 

});

請幫助。

來源

2017-04-05 Stefan Borović

問題是肯定**來自您的JavaScript如何使用'setTimeout'來調整'.header'（'$ header'）。 '.header-spacer'和'.offcanvas'都是不相關的。不能幫助更多的抱歉，但這應該給出一個起點。 –

您似乎在使用Bootstrap或類似的網格系統。在這些系統中，.row s需要包裝.container s。將container類添加到#content。缺少.container會使特定的.row推大body，使您看到效果。

來源

2017-04-06 00:04:44 Ouroborus

是的，你是對的，在裏面的所有內容中加入.container-fluid使它起作用。謝謝！ –

固定標頭在手機上被切斷

回答

相關問題