固定浮動分區

Question

我想要做div「Scroll」，即使在滾動期間，它仍然停留在一個地方。這裏是我的代碼：

<div class="container-fluid"> 
     <div class="Scroll"> 
     <div class="Down"> 
      <div class="form-group"> 
      <input type="text" class="form-control input-lg" placeholder="Search"> 
      </div> 
      <div class="form-group" style="display:inline-block;width:300px;"> 
      <h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4> 
      <input type="date" class="form-control" style="width:250px;" class="form-control" /> 
      <h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4> 
      <input type="date" class="form-control" style="width:250px;" class="form-control" /> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="Down"> 
     <table> 
     <thead> 
      <tr> 
      <th>NAME</th> 
      <th>DATE</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="name in names"> 
      <td>{{name.name}}</td> 
      <td>{{name.date}}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

CSS文件：

.Scroll { 
    position: fixed; 
} 
.Down { 
    clear: both; 
} 

Answer 1

你忘了定位值添加到.Scroll

.Scroll { 
    position: fixed; 
    top:15px; 
} 

檢查我的版本：

.Scroll { 
 
    position: fixed; 
 
    top:15px; 
 
    background:red; 
 
} 
 
.Down { 
 
    clear: both; 
 
} 
 

 
.container-fluid { 
 
    background:purple; 
 
    display:inline-block; 
 
    width: 100%; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<div class="container-fluid"> 
 
     <div class="Scroll"> 
 
     <div class="Down"> 
 
      <div class="form-group"> 
 
      <input type="text" class="form-control input-lg" placeholder="Search"> 
 
      </div> 
 
      <div class="form-group" style="display:inline-block;width:300px;"> 
 
      <h4><small>Select Date From <span class="glyphicon glyphicon-calendar"></span></small></h4> 
 
      <input type="date" class="form-control" style="width:250px;" class="form-control" /> 
 
      <h4><small>Select Date To <span class="glyphicon glyphicon-calendar"></span></small> </h4> 
 
      <input type="date" class="form-control" style="width:250px;" class="form-control" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="Down"> 
 
     <table> 
 
     <thead> 
 
      <tr> 
 
      <th>NAME</th> 
 
      <th>DATE</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="name in names"> 
 
      <td>{{name.name}}</td> 
 
      <td>{{name.date}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div>