兩個可滾動的div

讓我盡我所能來解釋我想要發生的事情，向您展示我希望我可以得到一些幫助的代碼。兩個可滾動的div

所以，我試圖做一個從屏幕左側的滑動導航用戶界面（如很多移動應用程序）。主要內容滑過，顯示下方的導航菜單。

儘管手機上的內容基本上完全不在屏幕上，但在桌面上，很多頁面仍然可見......我會爲導航元素和主屏幕啓用滾動（而屏幕是轉移）。我不知道是否需要一個jquery插件？如果是這樣，那可能完全是針對不同的帖子。

這裏是帖子中的代碼：

HTML

<div id='wrapper'> 
    <div id='navWide'> </div> 
    <div id='containerWide'> </div> 
    <div id='containerTall'> 
     <div id='container'> 
      <div id='nav'> 
       <div id='navNavigate'> Open Menu </div> 
       <div id='navNavigateHide'> Close Menu </div> 
      </div> 
     </div> 
    </div> 
    <div id='sideContainerTall'> 
     <div id='sideContainer'> 
      <div id='sideNav'>Side Navigation </div> 
     </div> 
    </div> 
</div>

CSS

#wrapper { 
    width:100%; 
    min-width:1000px; 
    height:100%; 
    min-height:100%; 
    position:relative; 
    top:0; 
    left:0; 
    z-index:0; 
} 
#navWide { 
    color: #ffffff; 
    background:#222222; 
    width:100%; 
    min-width:1000px; 
    height:45px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:100; 
} 
#containerWide { 
    width:100%; 
    min-width:1000px; 
    min-height:100%; 
    position:absolute; 
    top:45px; 
    z-index:100; 
} 
#containerTall { 
    color: #000000; 
    background:#dadada; 
    width:960px; 
    min-height:100%; 
    margin-left:-480px; 
    position:absolute; 
    top:0; 
    left:50%; 
    z-index:1000; 
} 
/***** main container *****/ 

#container { 
    width:960px; 
    min-height:585px; 
} 
#nav { 
    color: #ffffff; 
    background:#222222; 
    width:960px; 
    height:45px; 
    position:fixed; 
    top:0; 
    z-index:10000; 
} 
#navNavigate { 
    background:yellow; 
    font-size:10px; 
    color:#888888; 
    width:32px; 
    height:32px; 
    padding:7px 6px 6px 6px; 
    float:left; 
    cursor:pointer; 
} 
#navNavigateHide { 
    background:yellow; 
    font-size:10px; 
    color:#888888; 
    width:32px; 
    height:32px; 
    padding:7px 6px 6px 6px; 
    float:left; 
    cursor:pointer; 
    display:none; 
} 
#sideContainerTall { 
    background:#888888; 
    width:264px; 
    min-height:100%; 
    margin-left:-480px; 
    position:absolute; 
    top:0; 
    left:50%; 
    z-index:500; 
} 
#sideContainer { 
    width:264px; 
    min-height:585px; 
    display:none; 
} 
#sideContainerTall { 
    background:#888888; 
    width:264px; 
    min-height:100%; 
    margin-left:-480px; 
    position:absolute; 
    top:0; 
    left:50%; 
    z-index:500; 
} 
#sideContainer { 
    width:264px; 
    min-height:585px; 
    display:none; 
} 
#sideNav { 
    width:264px; 
    height:648px; 
    float:left; 
}

的Javascript

$(document).ready(function() { 

    $('div#navNavigate').click(function() { 

     $('div#navNavigate').hide(); 

     $('div#navNavigateHide').show(); 

     $('div#sideContainer').show(); 

     $('div#containerTall').animate({ 
      'left': '+=264px' 
     }); 
    }); 

    $('div#navNavigateHide').click(function() { 

     $('div#navNavigate').show(); 

     $('div#navNavigateHide').hide(); 
     $('div#containerTall').animate({ 
      'left': '-=264px' 
     }, function() { 
      $('div#sideContainer').hide(); 
     }); 
    }); 

});

來源

2012-11-16 jstacks

用css，將它添加到#sideNav：

overflow:auto;

如果要強制滾動，不管內容是否表明它：

overflow:scroll;

來源

2012-11-16 05:37:38 ethorn10

兩個可滾動的div

回答

相關問題