headerをfv上に表記したい

Question

前提・実現したいこと

表題の通り、　レスポンシブ時にfvにheaderを載せたい

現状は下記の画像の通りです

ご教授いただけると幸いです。

発生している問題・エラーメッセージ

fvの上下に余白ができてしまいます

試したこと

fvのul　li
overflow：hiddenを設定しているが、余白が出てしまう
position: relative,absoluteを使い、headerをfv内に表示させるよう試みるも、できない

該当のソースコード

コード

※字数制限により、一部HTML,cssを書きました。
何卒宜しくお願い致します。

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  max-height: 80px;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header {
    position: fixed;
    top: 0;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 599px) {
  .header {
    position: fixed;
    top: 0;
    padding: 8px 10px;
    max-height: 60px;
  }
}

.header-inner {
  max-width: 1880px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.header-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-left h1 {
  display: block;
}

.header-left h1 .logo img {
  display: block;
  width: 130px;
  height: 130px;
  margin: 20px 120px 20px 20px;
}

.header-left .nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 120px;
  /*  @include tb {
                    display: none;
                } */
  /*  @include sp{
                        right: -75%;
                    } */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header-left .nav {
    top: 80px;
    position: fixed;
    top: 150px;
    right: 0;
    z-index: 10;
    overflow: hidden;
    width: 16.25rem;
    background-color: #000;
    width: 50%;
    height: 60vh;
    -webkit-transform: translate(550px);
            transform: translate(550px);
    -webkit-transition: .5s;
    transition: .5s;
  }
}

@media screen and (max-width: 599px) {
  .header-left .nav {
    top: 60px;
    position: fixed;
    z-index: 2;
    overflow: hidden;
    width: 16.25rem;
    background-color: rgba(0, 0, 0, 0.9);
    width: 75%;
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s;
  }
}

.header-left .nav .header-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-left .nav .header-list .header-item {
  color: #fff;
}

@media screen and (max-width: 599px) {
  .header-left .nav .header-list .header-item {
    padding: 20px;
    font-size: 2rem;
  }
}

.header-left .nav .header-list .header-item + .header-item {
  padding-left: 30px;
}

.header-left .nav .header-list .header-item > a {
  color: #fff;
  display: inline-block;
  -webkit-transition: .3s;
  transition: .3s;
  /* 0.3秒で拡大までの時間 */
}

.header-left .drawer-nav_active {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.header-right {
  margin-left: auto;
}

@media screen and (max-width: 599px) {
  .header-right {
    margin-left: 20px;
  }
}

.header-right .header-link {
  /*  height: calc(54/80*100%);
                background-color: $link-color;
                border-radius: 3px;
                padding: 15px 35px;
                display: flex;
                justify-content: flex-end;
                align-items: center; */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header-right .header-link {
    margin-left: auto;
  }
}

.header-right .header-link .calender-link {
  display: block;
  background-color: #978F10;
  text-decoration: none;
  font-weight: bold;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: #fff;
  padding: 10px 37px;
  font-size: 1.6rem;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header-right .header-link .calender-link {
    margin-right: 100px;
  }
}

@media screen and (max-width: 599px) {
  .header-right .header-link .calender-link {
    padding: 8px 16px;
    font-size: 1.4rem;
  }
}

.header-right .header-link .calender-link::before {
  content: "";
  display: inline-block;
  margin: -3px 5px 0 0;
  background: url(../../img/calender.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  width: 22px;
  height: 22px;
}

.header-right .header-link .calender-link:hover {
  background-color: #000;
}

/* .nav-wrapper{
    height: 100%;
    overflow-x: hidden;
    position: relative;
} */
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.overlay._open {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.modal {
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

.js-modal {
  /* display: block;
    width: calc(550 /1920*100%);
    height: calc(600/1080*100%);
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 20px;
    border: 1px solid #707070;
    transform: translate(-50%,-50%);
    z-index: 100; */
}

.js-modal .modal__bg {
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  position: absolute;
  width: 100%;
}

.js-modal .js-modal-content {
  background: #fff;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 60%;
  position: relative;
}

@media screen and (max-width: 599px) {
  .js-modal .js-modal-content {
    width: 95%;
    padding: 20px;
  }
}

@media screen and (min-width: 1180px) {
  .js-modal .js-modal-content {
    width: 28%;
    min-width: 550px;
    padding: 20px 60px 90px 60px;
  }
}

.form-inner .form_img {
  width: 18px;
  height: 18px;
}

.form-inner h2 {
  font-size: 2rem;
  text-align: center;
  padding: 10px;
}

.form {
  margin-top: 28px;
}

.form-list .form-item input {
  border: 1px solid #E7E7E7;
  padding: 0 10px;
  width: 100%;
  line-height: 1;
  color: #797878;
  height: 32px;
  margin-top: 10px;
}

.form-list .form-item select {
  border: 1px solid #E7E7E7;
  padding: 0 10px;
  width: 100%;
  line-height: 1;
  color: #797878;
  height: 32px;
  margin-top: 10px;
}

.form-close {
  text-align: center;
}

.form-close > a {
  display: inline-block;
  width: 198px;
  margin-top: 64px;
  border: 1px solid #000;
  text-align: center;
  padding: 13px;
  line-height: 1;
  -webkit-transition: .3s;
  transition: .3s;
}

.fv {
  position: relative;
  overflow: hidden;
}

.wrap {
  padding: 16px;
}

#slide_wrap {
  position: relative;
  overflow: hidden;
}

#slide_wrap .slide_item {
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear;
  transition: opacity 2s linear, -webkit-transform 7.5s linear;
  transition: opacity 2s linear, transform 7.5s linear;
  transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear;
  position: relative;
}

#slide_wrap .slide_item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  #slide_wrap .slide_item:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }
}

#slide_wrap .slide_item.show {
  opacity: 1;
}

#slide_wrap .slide_item.zoom {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#slide_wrap .slide_item img {
  display: block;
}

.fv-txt1 {
  display: block;
  position: absolute;
  top: 26%;
  left: 71%;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 3.4rem;
  color: #fff;
  padding-left: 51px;
  line-height: 6rem;
}

Comments

[Lhankor_Mhy]

fvとはなんですか？

[free_teku]

あっ、申し訳ありません。
コードが抜けていました！
今、貼りましたm(_ _)m

[Lhankor_Mhy]

問題が再現しませんでした。
header は fv の上にあるようでした。

[free_teku]

レスポンシブ時でも、可能なんですね！？
もう一度、私の方で確認し、折り返しご報告します！

いつも、ご回答いただきありがとうございます！！

[free_teku]

ご回答ありがとうございます。modalが原因っぽいので、改めて連絡します。
いつも、ご回答いただきありがとうございます

[free_teku]

Lhankor_Mhyさん
いつもありがとうございます
結論、modalが原因ではなくて、他に原因があるようでした。

[free_teku]

JSの　スクロールのコードかなと考えていますが、fv上に載っているんですか？

[Lhankor_Mhy]

> fv上に載っているんですか？

ページを開いたときはそうですね。

[free_teku]

開いた瞬間はそうなのですが、レスポンシブ時に（window<1160px)余白が出ます。自身で考えたのは
jsの設定かな？/cssかな？とそれぞれ確認しましたが、改善されませんでした。

[Lhankor_Mhy]

それは書かなくても私に伝わるものですかね？

[free_teku]

申し訳ございません。書きそびれました。m(__)m
もう一つ考えられるのが、Topの上限を決めていないがために
上にスクロールでき、その余白が表示されていることもひとつ考えられます。

[Lhankor_Mhy]

1080pxで確認しましたが、問題が再現しませんでした。
開いたときにはfvの上にheaderがあります。

[free_teku]

ご回答ありがとうございます。上部にスクロールすると、余白ができるのはどんな原因があったりしますか？「スクロール　top 余白」などで検索しましたが、それらしき回答やヒントは見つかりませんでした。

他のサイト(階層が3ページ構成)となっているため、他のサイトを確認したところ
上部に余白が生じていないため(正直、ほとんどコピペしています。＝header,modal)
していないところでいうと、fvのため、FVが上部に余白をもたらせないようにする必要があると仮説しています。何か原因となるコードはあるか、把握できますデショウカ？

[Lhankor_Mhy]

たぶん、原因はここにないので、難しいのではないかと思いますが。
問題が再現するコードをご提示ください。

[free_teku]

承知しました。今、お送りします
http://shiru-web.com/2017/06/26/01-62/

も確認したのですが、、

[Lhankor_Mhy]

jsFiddle を拝見しましたが、問題が再現しませんでした。
fvとheaderは重なっています。

おそらく、問題の認識が当方と free_teku さんとでずれているのだと思います。

[free_teku]

承知しました。
改めて、問題について説明します。
Lhankor_Mhyさんがおっしゃるように、更新をかけて、初めに戻すと、headerはfv上にあります。
（問題↓）
ですが、window-height>100pxにしたのちに、window-height<100pxに戻すと、fvを超えたTopまでスクロールでき
fvを超えたwindowが背景白で、そこにheaderが乗ります。→解決策は、fv上の余白を消す。すると、
jsで書いた100pxを基準にbgが#fff or #000の変更にも該当しなくなるため、スムーズにいくと考えています。

イメージつきますでしょうか？

[free_teku]

もしかしたら、すべてのコードを書いていないから、問題が生じていない可能性もあるため
下記にすべてのコードを貼ります。本当にいつも丁寧に回答いただきありがとうございます。

頭が上がりません。m(__)m

こちらが、すべてのコードです。
https://jsfiddle.net/take0844/zk5sh2wn/2/

[Lhankor_Mhy]

> window>100pxにしたのちに、window<100pxに戻す

横幅のことですか？
だとすると、当方の Chrome ではそこまで小さくできないようです。

> すると、jsで書いた

jsFiddle には js がありませんでした。これは回答にある js ですか？

[free_teku]

言葉足らずで申し訳ありません。
横幅ではなく、縦幅です。m(__)m

[Lhankor_Mhy]

とにかく、fvの余白を減らせばいいのですか？

[free_teku]

そうですね。できればそうしたいのですが、、

[Lhankor_Mhy]

であれば、margin-top:0 などとすればいいのでは。

[free_teku]

headerにmargin-top: 0px；を設定しましたができませんでした。改めて、分析してみた結果
header-bg-color: #fff;がwindow(height>100px)超えた後に、Window hight<100pxにもどすと
上記の現象が生じます。

一方で、room.htmlなどだとこの現象が起こりません。
↓推測で、fvの現象かなと判断し、そうでもなさそうでした。

原因追及にもう一つ力を貸していただけると幸いです。よろしくお願いいたします。
一応、room.htmlのコードも添付します。m(__)m
https://jsfiddle.net/take0844/e3Lo9bnp/

[Lhankor_Mhy]

fvの余白を消したいのですから、headerに書いてもダメなのではないですか？

[free_teku]

すみません。解決できました。今までの中で、一番謝りたいレベルです。

本当にありがとうございました！！

[free_teku]

Lhankor_Mhyさんにはいつも感謝しています。m(__)m

Answer 1

.fv {
  position: relative;
  overflow: hidden;
}

.wrap {
  padding: 16px;
}

#slide_wrap {
  position: relative;
  overflow: hidden;
}

#slide_wrap .slide_item {
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear;
  transition: opacity 2s linear, -webkit-transform 7.5s linear;
  transition: opacity 2s linear, transform 7.5s linear;
  transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear;
  position: relative;
}

#slide_wrap .slide_item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  #slide_wrap .slide_item:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }
}

#slide_wrap .slide_item.show {
  opacity: 1;
}

#slide_wrap .slide_item.zoom {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#slide_wrap .slide_item img {
  display: block;
}

.fv-txt1 {
  display: block;
  position: absolute;
  top: 26%;
  left: 71%;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 3.4rem;
  color: #fff;
  padding-left: 51px;
  line-height: 6rem;
}

/* header-top.css */

$(function(){

  let header     = $('.header');
  let Logo = $('.header-logo');
  let item    = $('.header-item');
  let drawer    = $('.drawer-nav');
  let line    = $('.line');
  $(window).scroll(function(){
    if($(this).scrollTop()>=100){
      //$("#logo").attr("src", "")

      //header-bgを白に変更
      header.css('background','#fff');
      //logoを変更
      Logo.attr('src', '/img/sub-header-logo.png');
      
      //aタグで囲った文字を黒に変更
      item.find('a').css('color', '#000');
        //ハンバーガーアイコンを黒に変更
        $('head').append('<style>.line { background: #000; } </style>');
        //$('head').append('<style>.drawer-hamburger-icon::after { background: #000; } </style>');
        line.css('background-color','#000');
        if (window.matchMedia( "(min-width: 1179px)" ).matches) {
          drawer.css('background-color','transparent');
         } else {
            drawer.css('background-color','#fff');
          }
        // ドロワーの色を白に
        } else {
       
          // 画面がトップから100px以下の時は、上記と逆の処理を行う
          header.css('background','transparent');
          Logo.attr('src', '/img/top-header-logo.png');
          item.find('a').css('color', '#fff');
          // drawer.css('background-color','#000');
          $('head').append('<style>.line{ background: #fff; } </style>');
          //$('head').append('<style>.drawer-hamburger-icon::after { background: #fff; } </style>');
          line.css('background-color','#fff');
          if (window.matchMedia( "(min-width: 1179px)" ).matches) {
            header.css('background-color','transparent');
            drawer.css('background-color','transparent');
          } else {
              drawer.css('background-color','rgba(0,0,0,0.9)');
            }
        }
      });
    });

Answer 2

字数制限により載せれなかったので、下記にfvを載せます。
原因はheaderにあるようにも感じますが、できませんでした