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

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

ただいまの
回答率

90.03%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,451

aki_

score 10

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

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/11 18:34

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

    キャンセル

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

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • jQueryに関する質問
  • ハンバーガーメニュー使用時に背景を「position:fixed」にした際、メニューの高さが見切れてしまう