無法將側邊菜單滾動到頂部

我剛從bootstrap 3開始，陷入了一個問題。我想有一個像this文檔那樣的側面菜單，這個菜單在向下滾動期間被固定，並相應地突出顯示部分。我設法完成了與此類似的操作，但是當我將窗口大小調整爲手機大小時，側邊菜單與內容重疊，而不是處於頂部。如果您檢查了鏈接，當您調整窗口大小時，旁邊的菜單位於內容的頂部。無法將側邊菜單滾動到頂部

我相信這裏的罪魁禍首是affix-top但我把它留給有經驗的人在這裏計算器

<body data-spy="scroll" data-target="#myScrollspy"> 
    <!-- Page Content --> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="page-header">Title 
        <small>Subheading</small> 
       </h1> 
      </div> 
     </div> 

     <!-- Content Row --> 
     <div class="row"> 
      <!-- Sidebar Menu --> 
      <div class="col-md-2" id="myScrollspy"> 
       <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" > 
        <li class="active"><a href="#section-1">Section One</a></li> 
        <li><a href="#section-2">Section Two</a></li> 
        <li><a href="#section-3">Section Three</a></li> 
        <li><a href="#section-4">Section Four</a></li> 
        <li><a href="#section-5">Section Five</a></li> 
       </ul> 
      </div> 

      <!-- Content Column --> 
      <div class="col-md-9"> 
       <h2 id="section-1">Section One</h2> 
       <h2 id="section-2">Section Two</h2> 
       <h2 id="section-3">Section Three</h2> 
       <h2 id="section-4">Section Four</h2> 
       <h2 id="section-5">Section Five</h2> 
      </div> 
     </div> 
    </div> 
</body>

如何這個問題能解決？

來源

2014-09-27 Much Overflow

您正在查找的內容稱爲CSS媒體查詢，它允許您根據媒體功能（如顏色，高度和寬度）修改樣式規則。您鏈接的Bootstrap頁面使用最小和最大寬度功能來更改側邊欄的顯示方式，您可以在頁面底部附近看到它的CSS file。相關的代碼如下所示：

@media (min-width: 768px) { 
    /* Adjust sidenav width */ 
    .bs-docs-sidenav { 
     width: 166px; 
     margin-top: 20px; 
    } 
    .bs-docs-sidenav.affix { 
     top: 0; 
    } 
} 
@media (max-width: 767px) { 
    /* Sidenav */ 
    .bs-docs-sidenav { 
     width: auto; 
     margin-bottom: 20px; 
    } 
    .bs-docs-sidenav.affix { 
     position: static; 
     width: auto; 
     top: 0; 
    } 
}

我簡化了一下，但那應該足以讓你開始。當最大寬度小於768px時，側邊欄寬度將變爲自動，並且附加碼將使側邊欄保持在頁面頂部。

來源

2014-09-27 17:48:02 Pred

修復它。我希望我能給你買杯咖啡。謝了哥們！ – 2014-09-28 05:33:27

無法將側邊菜單滾動到頂部

回答

相關問題