我在Angular 2項目中使用引導程序，並且我想在用戶向下滾動頁面時始終凍結幾個div（在代碼中使用ID作爲過濾器和類別）。如何使用引導進行滾動時修復頂部的div？

代碼段代碼：我一直在使用自舉的「詞綴」試圖

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 

       <li routerLinkActive="active"><a routerLink="/overview">Overview</a></li> 
       <li routerLinkActive="active"><a routerLink="/insights">Insights</a></li> 
      </ul> 






     </div> 
     <!--/.nav-collapse --> 


    </div> 
</nav> 


<div id="filters" class="container-fluid" style="margin-top: 60px" > 

    <div class="row"> 
     <div class="col-md-2 col-sm-4"> 
     <button>Filter 1</button> 
     </div> 
     <div class="col-md-2 col-sm-4"> 
     <button>Filter 2</button> 
     </div> 
    </div> 
</div> 

<div id="categories" class="container-fluid" > 
    <div class="row"> 
     <ul class="nav navbar-nav"> 

       <li><a routerLink="#">Sub Category 1</a></li> 
       <li><a routerLink="#">Sub Category 2</a></li> 
      </ul> 

    </div> 

    <div class="row"> 

     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div style="background: blue; height: 800px;"> 
       Trend Chart 
      </div> 
     </div> 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
      <div style="background: green; height: 800px;"> 
       Bar Chart 
      </div> 
     </div> 
    </div> 



</div>

，但它打破了滾動和「過濾器」頁邊距和'categories'divs，可以看到here

請讓我知道如果我缺少任何需要添加的工作詞綴。

來源

2017-07-10 Deepak

你嘗試使用'位置fixed'？ –

要實現你的目標，你需要使用position: fixed和z-index: 1030 CSS與DIV

這裏的jsfiddle

使用此CSS在你的DIV

<div id="filters" class="container-fluid" 
style="margin-top: 60px; position: fixed; z-index: 1030;"> 

    <div class="row"> 
     <div class="col-md-2 col-sm-4"> 
     <button>Filter 1</button> 
     </div> 
     <div class="col-md-2 col-sm-4"> 
     <button>Filter 2</button> 
     </div> 
    </div> 
</div>

來源

2017-07-10 07:36:48

感謝Ashiqur。我能夠修復過濾器和類別的div。但是，當我滾動時，內容（藍色\綠色div）仍然不會停留在這些div之下。爲了說清楚，在下面的小提琴中：'https：// jsfiddle.net/ugufn63z/7 /'，當用戶滾動時，藍色\綠色div不應該穿過紅線。任何想法如何實現？ – Deepak

我更新了我的答案。你可以檢查[fiddle]（https://jsfiddle.net/ugufn63z/10/） –

使用樣式屬性「的位置：固定「在你想修復的div中。也設置z-index值大於100.（這是爲了顯示滾動時所有其他div的固定div）。

例子：

<div id="filters" class="container-fluid" style="margin-top: 60px;position:fixed;z-index:999;" > 
 

 
    <div class="row"> 
 
     <div class="col-md-2 col-sm-4"> 
 
     <button>Filter 1</button> 
 
     </div> 
 
     <div class="col-md-2 col-sm-4"> 
 
     <button>Filter 2</button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="categories" class="container-fluid" style="position:fixed;z-index:999;" > 
 
    <div class="row"> 
 
     <ul class="nav navbar-nav"> 
 

 
       <li><a routerLink="#">Sub Category 1</a></li> 
 
       <li><a routerLink="#">Sub Category 2</a></li> 
 
      </ul> 
 

 
    </div> 
 

 
    <div class="row"> 
 

 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
 
      <div style="background: blue; height: 800px;"> 
 
       Trend Chart 
 
      </div> 
 
     </div> 
 
     <div class="col-md-6 col-sm-12 col-xs-12"> 
 
      <div style="background: green; height: 800px;"> 
 
       Bar Chart 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-07-10 09:54:54 Bala

如何使用引導進行滾動時修復頂部的div？

回答

使用此CSS在你的DIV

相關問題