bodyにbackground-image(擬似要素(before))を設定しているのですが、
IE11でサイトを表示する際に、アクセス時は表示されず、メニューボタン(ハンバーガーメニュー)を押したタイミングで表示されます。
どなたか原因をご教示いただけると幸いです。
よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html> 3<head> 4割愛 5</head> 6<header> 7 <div id="head" class="before"> 8 <div id="menuWrapper"> 9 <a id="menuButton"><span>MENU</span></a> 10 </div> 11 <img id="headLogo" class="logoHide" src="image/logoMark.png" alt="ロゴマーク"> 12 <nav class="nav close" id="nav"> 13 <ul class="navList"> 14 <li><a id="moveTop" href="#head">Top</a></li> 15 <li><a id="moveAbout" href="#about">About</a></li> 16 <li><a id="moveProduct" href="#product">Service</a></li> 17 <li><a id="moveContact" href="#contact">Contact</a></li> 18 </ul> 19 </nav> 20 </div> 21</header> 22<main> 23 <!-- About --> 24 <section> 25 <div id="about"> 26 割愛 27 </div> 28 </section> 29 <!-- Product --> 30 <section> 31 <div id="product"> 32 割愛 33 </div> 34 </section> 35 <!-- Contact --> 36 <section> 37 <div id="contact"> 38 割愛 39 </div> 40 </section> 41</main> 42<footer> 43 割愛 44</footer> 45<script src="js/ofi.js"></script> 46<script src="js/jquery-3.4.1.min.js"></script> 47<script src="js/main.js"></script> 48
css
1body:before { 2 content: ""; 3 display: -webkit-block; 4 display: -ms-block; 5 display: block; 6 position: fixed; 7 top: 0; 8 left: 0; 9 z-index: -1; 10 width: 100%; 11 height: 100vh; 12 background: url("image/bg.jpg") center no-repeat; 13 background-size: cover; 14} 15
js
1'use strict'; 2{ 3 //query,ID,class取得 4 var body = document.querySelector("body"); 5 var head = document.getElementById('head') 6 var headLogo = document.getElementById('headLogo'); 7 var menuWrapper = document.getElementById('menuWrapper'); 8 var menuButton = document.getElementById('menuButton'); 9 var nav = document.getElementById('nav'); 10 var moveTop = document.getElementById('moveTop'); 11 var moveAbout = document.getElementById('moveAbout'); 12 var moveProduct = document.getElementById('moveProduct'); 13 var moveContact = document.getElementById('moveContact'); 14 15 //ページ読み込み時処理 16 window.onload = function(){ 17 //画面をゆっくり明るくする 18 head.classList.remove('before'); 19 head.classList.add('after'); 20 //ロゴをゆっくり表示 21 headLogo.classList.remove('logoHide'); 22 headLogo.classList.add('after'); 23 } 24 25 //読み込み時とリサイズ時、高さを画面いっぱいにする 26 $(function () { 27 $("#head").css("height",$(window).outerHeight()); 28 $(window).resize(function(){ 29 $("#head").css("height",$(window).outerHeight()); 30 }); 31 }); 32 //メニューボタン押下時処理 33 menuWrapper.onclick = function() { 34 //メニューが隠れている場合 35 if (nav.classList.contains('close')){ 36 //メニューを開く 37 nav.classList.remove('close'); 38 nav.classList.add('open'); 39 //背景を固定する 40 body.classList.add('fixed'); 41 //メニュー表示中の場合 42 } else { 43 //メニューを閉じる 44 nav.classList.add('close'); 45 nav.classList.remove('open'); 46 //背景固定を解除 47 body.classList.remove('fixed'); 48 } 49 };
あなたの回答
tips
プレビュー