我在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

相关问题