Htmlの位置がバグの画面を右に修正しました

私は、モバイルデバイスがメニューを表示するためのメニューボタンを取得する応答性の高いWebサイトを作っています。このボタンを押すとスクロールすることができるので、それを使用して固定しました。overflow: hidden;とposition: fixed;Htmlの位置がバグの画面を右に修正しました

何らかの理由でサイトが右に「ジャンプ」してスクロールできません。これは、ソースコードである：

<body> 
     <div id="header"> 
      <div id="logo"> 
       <a href=""><img src="images/logo.png" alt="logo"/></a> 
      </div> 
       <div class="menuToggle"> 
        <span></span> 
        <span></span> 
        <span></span> 
        <span></span> 
       </div> 
      <div id="nav"> 
       <div class="aanmelden"> 
        <a href="">Aanmelden</a> 
       </div> 
        <ul> 
         <li><a href="">Download app</a></li> 
         <li><a href="">Blog</a></li> 
         <li><a href="">Over GYM2Go</a></li> 
        </ul> 
       </div> 
      </div> 
    </body>

とJavaScript：

$(window).ready(function() { 
    menuToggle(); 
}); 

var down = false; 

function menuToggle() { 
    var i = 0; 
    $('.menuToggle').on('click', function(){ 
     $('.menuToggle').toggleClass('active'); 
     $('#nav').toggleClass('active'); 
     $('body').toggleClass('active'); 

     if (down) { 
      $('.lastItem').remove(); 
      down = false; 
     } else { 
      $("ul").append('<li class="lastItem"><a href="">Aanmelden</a></li>'); 
      down = true; 
     } 
    }); 

    $('#nav > ul > li').on('click', function(e) { 
     $('#nav > ul > li.active').removeClass('active'); 
     $(this).addClass('active'); 
     var childUl = $(this).find('ul'); 
     $('#nav > ul > li > ul').each(function() { 
      if (!childUl.is($(this))) { 
       $(this).hide(); 
      } 
     }); 
     if (childUl.length > 0 && childUl.css('display') == 'none') { 
      e.preventDefault(); 
      childUl.toggle(); 
     } 
    }); 
};

とCSS：

body.active { 
    overflow: hidden; 
    position: fixed; 
} 

/* Menu */ 
@media screen and (max-width: 792px) { 
    .aanmelden { 
     display: none; 
    } 

    ul { 
     display: none; 
    } 

    .menuToggle { 
     display: block; 
    } 

    #nav { 
     margin: 0; 
     position: absolute; 
     top: 110px; 
     background: #e74a2b; 
     height: 100%; 
     width: 100%; 
     max-height: 0; 
     overflow: hidden; 
     -webkit-transition: width 0.3s; /* Safari */ 
     transition:max-height 0.3s; 
    } 

    #nav.active { 
     max-height: calc(100% - 110px); 
    } 

    ul { 
    display: block; 
    z-index: 5; 
    position: relative; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    } 

    ul li { 
     float: left; 
     width: 100%; 
     border-bottom: 1px solid rgba(255,255,255,0.4); 
    } 

    ul li a:hover { 
     color: #2c2c2c; 
    } 

    ul li a { 
     float: left; 
     width: 100%;  
     color: white; 
     padding: 15px 20px; 
    } 
}

出典

2017-03-07 Kevin Tinnemans

これらの問題が発生しているブラウザを教えてください。 – Guido

ので、いくつかのいじりの後、私は、これは私の問題への解決策であることがわかりました。

body.active { 
    overflow: hidden; 
    position: fixed; 
    top:0; 
    left:0; 
}

おそらくposition: fixed;が固定位置を必要とするためです。

出典

2017-03-07 13:19:25

Htmlの位置がバグの画面を右に修正しました

答えて

関連する問題