A.html（共通ヘッダー用,position;fixedで固定)がB.html（load:A.html＆C.html)とD.html（load:A.html)で文字位置がずれる問題について

初心者です。宜しくお願いします。ソースは以下になります。

A.html(ヘッダー用）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>A.html</title> <link href="**A.css**" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="title"> <h1>title</h1> </div> <div class="menu"> <a href="**B.html**">**home**</a> <a href="**C.html**">**collection**</a> </div> </header>

A.css

html{
height:100%;
width: 100%;
background-image:url("〇〇.JPG");
background-size: 100%;
background-attachment: fixed
}
header{
position: fixed;
top:0%;
left:0%;
width: 100%;
height: 20%;
text-align: center;
background: white
}
.title{
color:#124334;
font-family:"Arial Black", Gadget, "sans-serif";
font-size: 150%
}
a{
margin-right: 30px;
color: black
}
div.menu{
margin-top:20px;
font-family:"Arial Black", Gadget, "sans-serif";
color: black;
font-size: 110%;
}

B.html（homeになるhtmlファイル、A.htmlのヘッダーとC.htmlのコンテンツを使用）

B.css

div.C.html{
margin-top:15%;
}

B.Jquery

$(function(){
$("#A.html").load("A.html.html");
});
$(function(){
$("#C.html").load("C.html.html");
});

C.html(B.htmlのメインコンテンツ）

<html> <head> <meta charset="utf-8"> <title>C.html</title> <link href="C.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Pick up title！！(画像をクリック）</h1> <div class="**iiiii**"> <a href="" class="attention"><img src="WWW.png"></a> <a href="" class="attention"><img src="XXX"></a> <a href="" class="attention"><img src="YYYY.png"></a> </div> <div class="youtube"> <iframe width="700" height="400" src="youtube></iframe> </div> </body> </html>

C.css

.iiiii{
width:100%;
height: 400px;
text-align: center;
}
.attention{
padding-left:5%;
}
.youtube{
position: relative;
text-align: center;
}
h1{
text-align: center
}

D.html（B.htmlからのリンク先のファイル、ヘッダーはA.htmlを共通）

<html> <head> <meta charset="utf-8"> <title>Collection</title> <link href="D.css" rel="stylesheet" type="text/css"> <script src="jquery-3.4.1.js" type="text/javascript"></script> <script src="AAAAA.js" type="text/javascript"></script> </head> <div id="**A.html**"></div> <body> <div class="lp-2"> <h1>Collection</h1> <a href="">コンテンツ１</a> <a href="">コンテンツ２</a> <a href="">コンテンツ３</a> <a href="">コンテンツ４</a> </div> </body> </html>

D.css

.lp-2{
margin-top:15%;
text-align: center
}
html{
width: 100%;
}

D.jQuery

$(function(){
$("#A.html").load("A.html.html");
});

//D.htmlでは読み込まない(上のA.html:ヘッダーのみ読み込む)//
$(function(){
$("#C.html").load("C.html.html");
});

問い合わせ内容

長くなりましたが
指南頂きたいこと、問題を以下に私なりにまとめます。

B.htmlのページにloadしたA.htmlの<a>からD.htmlにリンクした際に、
共通ヘッダーとしてjQueryで読み込んでいるA.htmlの要素が少しずれてしまいます。（リンク前、リンク後：以下のような感じです）
■B.html(jQueryでloadしているA.html；header）➡　D.html(jQueryでloadしているA.html:header）
リンク前：B.htmlのページ位置(header)➡　　　　　　　　　　title
リンク後：D.htmlのページ位置(header)➡　　　　　　　　　title

１．この上記のようなズレを解消できる記述をご教示願います。

２．以下もしよろしければ（必須ではありません！）
よく見る企業ホームページなどで、リンクした瞬間の挙動がヘッダーは途切れることなく（一瞬消えない）固定されるのを見ますが、
毎回一瞬消えてしまうのを避ける方法をよろしければご教示願います。

以上、宜しくお願い致します。

Lhankor_Mhy

2020/05/14 02:32

1について、「B.htmlからD.htmlに内リンク?した際」について、詳しくお願いいたします。内リンクするとは、どのような操作ですか？ 2について、Ajaxで読み込んでいるヘッダーが消えないページの例を挙げてください。

Lhankor_Mhy

2020/05/14 02:32

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

Lhankor_Mhy

2020/05/14 02:49

質問の変更拝読。「D.htmlにリンクした際」について、詳しくお願いいたします。リンクするとは、どのような操作ですか？　リンクされているテキストをクリックし、ページ移動する、という解釈で合っていますか？

espil

2020/05/14 02:56

Lhankor様ありがとうございます。おっしゃる通り、Bのページで(A.htmlのテキスト）をクリック➡D.htmlへ移動になります。この時、BのページとDのページで、共通としているはずのA,htmlの位置が少しずれてしまいます。

espil

2020/05/14 02:58

Lhankor様参考としては、ファナックのホームページのようなヘッダーです。それにスクロールしてもの固定された状態にするイメージで取り掛かっています。

Lhankor_Mhy

2020/05/14 03:04

> ファナックのホームページここですか？ https://www.fanuc.co.jp/ これでしたら、Ajaxを使っていません。どのページにも同じヘッダー部分のHTMLが出力されているだけです。

Lhankor_Mhy

2020/05/14 03:07

「この時、BのページとDのページで、共通としているはずのA,htmlの位置が少しずれてしまいます」とのことですが、「この時」以外は位置がずれないのでしょうか？つまり、 B→D　位置がずれる？→D　位置がずれないという解釈で正しいですか？　それともBとDのヘッダーの位置ずれは、「リンクする」操作にかかわらず常に起きているのですか？

espil

2020/05/14 03:29

>同じヘッダーの共通部分はい、そのページです。構造教えていただきありがとうございます。ヘッダーを修正したとき、ページごとに同じ修正を加えなければいけなくなるということですね。２についてAjaxやってみます！＞B-D , D-B D➡Bも同じようにずれます。リンクしていない状態で比べてみたら、ずれていました。 ➡単純ですが、スクロールバーがあるかないかの違いのようでした。 D.htmlの縦を長くし、スクロール表示にしたとこと、 B.htmlとズレがなくなりました！１についてこんなところでかなり躓いていました。お恥ずかしい限りです。スクロールはページの幅に含まれないとばかり。。。おかげ様でたどり着けました。

Lhankor_Mhy

2020/05/14 03:42

>ヘッダーを修正したとき、ページごとに同じ修正を加えなければいけなくなるということですね。いえ、普通のWeb担はそんな手間をかけないです。「CMS」でググってみることをおすすめします。

Lhankor_Mhy

2020/05/14 03:44

ご解決されて何よりです。自己解決の手続きをお願いします。 https://teratail.com/help#resolve-myself