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
関連htmlです。
JavaScriptが 'setheadout'を使って' .header'（ '$ header'）を調整する方法は、間違いなく**間違いです。 '.header-spacer 'と' .offcanvas'の両方は無関係です。もっと助けてもらえませんが、それは出発点です。 –