ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

Question

ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

解決済

回答 1

投稿 2018/03/11 16:48

評価
クリップ 0
VIEW 3,425

aki_

score 17

jQueryプラグイン「meanmenu」を使用しております。
このままだと背景が動くため、
jQueryでheader以外の部分にに
クラス「addfixed」を付与して「position:fixed」状態にし、
スクロールの高さを取得しました。

画面が大きい状態でみると問題は発生しませんが、
小さな画面で見た際、
メニュー部分の高さが見切れてしまいます。
しかもul部分のheightを「100vh」より大きな値にしても、
なぜかスクロールが見切れてしまいます。
なお、ul部分は「overflow-y: scroll」にした状態です。

どこの高さを操作すれば、きちんとメニュー部分が見切れずに入るのか、教えていただければ幸いです。
URL：
http://nakatakira.html.xdomain.jp/test/test2/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="meanmenu.css" rel="stylesheet" type="text/css" media="all">    
    <style>
body{
    margin:0;
    padding:0;
}
.main{
    height: 170vh;
    background: #C06;
}
footer{
    height:30vh;
    background: #303838;
}
header ul{
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}
.addfixed{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow:hidden;
}
    </style>
</head>
<body>
    <header>
        <nav class="mobilenav">
            <ul class="gnav">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
            </ul><!--/.gnav_s-->
        </nav>
    </header>
    <div class="background">
        <div class="main">
        </div>
        <footer>
        </footer>
    </div>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>// JavaScript Document
$(function(){
    //meanmenu
    $('.mobilenav').meanmenu({
    meanMenuContainer: "header", // メニューを表示させる位置
    meanScreenWidth: '2000', // 表示させるウィンドウサイズ(ブレイクポイント)        
    });
    //meanmenu中、スクロール防止
  var state = false;
  var scrollpos;

  $('.meanmenu-reveal').on('click', function(){
    if(state == false) {
      scrollpos = $(window).scrollTop();
      $('.background').addClass('addfixed').css({'top': -scrollpos});
      $('header nav').addClass('open');
      state = true;
    } else {
      $('.background').removeClass('addfixed').css({'top': 0});
      window.scrollTo( 0 , scrollpos );
      $('header nav').removeClass('open');
      state = false;
    }
  });
});
</script>
</body>
</html>

/*! #######################################################################

    MeanMenu 2.0.7
    --------

    To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
    display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
    float: left;
    width: 100%;
    position: fixed;/*relativeから変更*/
    background: #0c1923;
    padding: 4px 0;
    min-height: 60px;/*変更*/
    z-index: 999999;
}

.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
}

.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #0c1923;
    margin-top: 44px;
}

.mean-container .mean-nav ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}

.mean-container .mean-nav ul li {
    position: relative;
    float: left;
    width: 100%;
}

.mean-container .mean-nav ul li a {
    display: block;
    float: left;
    width: 90%;
    padding: 1em 5%;
    margin: 0;
    text-align: left;
    color: #fff;
    border-top: 1px solid #383838;
    border-top: 1px solid rgba(255,255,255,0.5);
    text-decoration: none;
    text-transform: uppercase;
}

.mean-container .mean-nav ul li li a {
    width: 80%;
    padding: 1em 10%;
    border-top: 1px solid #f1f1f1;
    border-top: 1px solid rgba(255,255,255,0.25);
    opacity: 0.75;
    filter: alpha(opacity=75);
    text-shadow: none !important;
    visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
    border-bottom: none;
    margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
    width: 70%;
    padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
    width: 60%;
    padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
    width: 50%;
    padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
    background: #252525;
    background: rgba(255,255,255,0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: 1px;
    width: 26px;
    height: 32px;
    padding: 12px !important;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.4) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: rgba(0,0,0,0.9);
}

.mean-container .mean-push {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    clear: both;
}

.mean-nav .wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.mean-remove {
    display: none !important;
}

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 1 件

評価が高い順
新着順
古い順

同じタグがついた質問を見る

score 1 · Accepted Answer · 2018-03-11T18:20

ベストアンサー

+1

「.mean-container .mean-nav」に「margin-top: 44px;」がついているので、
「header ul」の高さを、100vhから44pxマイナス（もしくはもうちょっと大きくして微調整）すれば、見切れないと思います。

header ul {
    height: calc(100vh - 44px);
}

投稿 2018/03/11 18:20

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/03/11 18:34

ありがとうございます。
margin分プラスではするのではなく、マイナスするのですね。
無事、下までスクロールすることができました。

ありがとうございます。 margin分プラスではするのではなく、マイナスするのですね。無事、下までスクロールすることができました。

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン