Div bleibt während des Scrollens. CSS

Question

Ich möchte div "Scroll" machen, die an einem Ort bleiben, auch während Scroll. Hier ist mein Code:

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

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

Es funktioniert nicht. Danke für die Antworten im Voraus!

Answer 1

Fügen Sie einfach position:absolute statt position:fixed wie unten:

.Scroll { 
    /*position: fixed;*/ 
    position: absolute; 
} 

Answer 2

Sie müssen genügend Inhalt haben zu blättern, oder du bist nicht scrollen gehen zu können. Die folgende CSS ist, was ich verwendet:

.Scroll { 
display:block; 
    position: fixed; 
    top:100; 
    left:100; 
    background:#fff; 
} 
.Down { 
    clear: both; 
} 

mein jsfiddle Siehe:

https://jsfiddle.net/e63eyswp/1/