Html position fixed bugs screen to right

我正在製作一個響應式網站，移動設備可以通過菜單按鈕來查看菜單。當按下這個按鈕時，可以滾動，所以我固定使用overflow: hidden;和position: fixed;Html position fixed bugs screen to right

出於某種原因網站「跳」到右側，我無法向後滾動。這是源代碼：

<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 position fixed bugs screen to right

回答

相關問題