前提・実現したいこと
ヘッダーを上部に固定し、スクロールしても追従してくるようにしたいです
発生している問題・エラーメッセージ
スマホで確認するとヘッダー部分とハンバーガーメニュー内のナビゲーションメニューをスクロールすると下へスクロールできますが、メインビジュアル部分のみスクロールできません。
pcで見たり、pc上のスマホバージョンでもスクロールできます。メインビジュアルのスライドショーが始まるとタッチしてもスクロールバーが表示されなくなるようです。
初心者で至らない点があるかと思いますがどうぞよろしくお願いします。
該当のソースコード
html
1<head>
2<meta charset="UTF-8">
3<meta name="viewport" content="width=device-width, initial-scale=1.0">
4<title>demo3hair salon caravan</title>
5<link rel="stylesheet" href="bootstrap-reboot.css">
6<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
9<script src="js/main.js"></script>
10<script src="js/smooth-scroll.js"></script>
11<link rel="stylesheet" href="style.css">
12<link rel="stylesheet" href="pc.css" media="(min-width:768px)">
13<link rel="stylesheet" href="sp.css" media="(max-width:767px)">
14<link rel="preconnect" href="https://fonts.gstatic.com">
15<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
16 <script>
17 var scroll = new SmoothScroll('a[href*="#"]');
18 </script>
19</head>
20
21<body>
22<header id="page-header">
23<div id="header-container">
24<div id="btn-container" >
25<div id="btn-menu">
26 <i></i>
27 <i></i>
28 <i></i>
29</div><!--#btn-menu-->
30</div><!--/#btn-container-->
31<div class="pc rogo"><img src="images/caravan-rogo3.png"></div>
32 <div class="rogo sp"><img src="images/sp-caravan-rogo3.png"></div>
33
34<div class="yoyaku pc"><a href=""><img src="images/pc-btn-casravan.jpg"></a></div>
35<div class="yoyaku sp"><a href=""><img src="images/btn-yoyaku.jpg"></a></div>
36
37
38</div><!--/.header-container-->
39</header>
40
41
42<main>
43 <div id="mv-container">
44 <div class="mainvisual-container">
45 <img src="images/sp-caravan-m1−3.jpg" alt="salon image">
46 <img src="images/sp-caravan-m2.jpg" alt="salon image">
47 <img src="images/sp-caravan-m3.jpg" alt="salon image">
48 <img src="images/sp-caravan-m8.jpg" alt="salon image">
49 <img src="images/sp-caravan-m4.jpg" alt="salon image">
50 <img src="images/sp-caravan-m10.jpg" alt="salon image">
51
52 </div><!--/.mainvisual-container-->
53 </div>
54</main>
55
56<nav id="nav-main">
57 <div class="background">
58<ul>
59 <li>menu</li>
60 <li>staff</li>
61 <li>blog</li>
62 <li>access</li>
63 <li>reserve</li>
64 <li>recrute</li>
65 <li>info</li>
66</ul>
67 </div>
68</nav>
69
70<script>
71 $(document).ready(function(){
72 $('.mainvisual-container').bxSlider({
73 mode: 'fade',
74 speed: 3900,
75 auto: true,
76 pager: false,
77 controls: false
78
79 });
80 });
81</script>
82<script>
83 $('#btn-menu').on('click',function(){
84 $('#btn-menu, #nav-main' ).toggleClass('show');
85 });
86</script>
87
88
89 <script>
90 $(function() {
91 const
92 height=$("header-container").height();
93 $("main").css("padding-top",height +40 );
94 });
95 </script>
css
1<style.css>
2#header-container {
3 display: flex;
4 position: fixed;
5 z-index: 10;
6 width: 100%;
7 height: auto;
8 top: 0;
9 background-color: #fff;
10 }
11
12#header-container .pc{
13 margin: 0 0 0 auto;
14}
15#header-container .sp{
16 margin: 0 0 0 0;
17}
18#page-header{
19 height: 40px;
20}
21#btn-menu {
22 display: block;
23 width: 25px;
24 height: 33px;
25 position: relative;
26
27}
28
29main {
30 top: 45px;
31}
32#nav-main {
33 position: fixed;
34 top: 3rem;
35 left:0;
36 right: 0;
37 bottom:0;
38 height: fit-content;
39 padding: 1rem;
40 display: none;
41 transition: opacity .5s, visibility .5s;
42}
43#nav-main.show {
44
45 display: block;
46 position: fixed;
47 left: 0;
48 padding: 0;
49 z-index: 11;
50}
試したこと
・ヘッダーに100vhを指定するとスクロールできますが、リンク先をクリックできず、またヘッダーの背景を白にしたいので画面全体が真っ白になります。
・position: stickyを指定しましたが変化がありませんでした。
・その他スムーズにスクロールするjqueryなど試しましたが変化がありませんでした。
補足情報（FW/ツールのバージョンなど）
スライドショーにはjqueryを使用しています。
js/main.jsには現在何も書いておりません
smooth-scroll.jsは文字数の都合上こちらに記載いたしました。
リンク内容
動作確認していただくためデモサイトをアップしました。pcバージョンの画像加工が完了していないため、スマホバージョンで見ていただけると助かります。(実際にスマホで見るとメインビジュアルがスクロールできない状態です。)
デモサイト リンク内容
Q&A
