當用戶在頁面上下滾動時，如何使HTML小部件「跟隨」仍然可見？

Question

在我AngularJS的應用程序，我有以下文本區域部件：

<div class="col-md-4" style="padding-top: 30px"> 
     <div class="ibox float-e-margins"> 
      <div class="ibox-title"> 
       <h5>Proposed Updates for Subject Area: {{selectedSubjectArea}}</h5> 

       <div ibox-tools></div> 
      </div> 
      <div class="ibox-content"> 
       <form role="form" class="form-inline"> 
        <div class="form-group"> 
         <textarea class="form-control" rows="4" cols="127" data-ng-model="proposedChanges"> 
         </textarea> 
        </div> 
        <button class="btn btn-white" type="submit" data-ng-click="submitChanges()">Submit</button> 
       </form> 
      </div> 
     </div> 
    </div> 

什麼CSS屬性，這將「使」這個小部件遵循的視線，並保持可見，隨着用戶滾動頁面向上或向下？

Answer 1

.ibox{ 
 
    position:fixed; 
 
    bottom:30px; 
 
    right:20px; 
 
    
 
    /*just for the preview*/ 
 
    width:50px; 
 
    height:50px; 
 
    background:silver; 
 
} 
 

 
.wrap{height:700px;}

<div class="wrap"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br><br><br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 

 
<div class="ibox"></div>

這將會把對象右下角。您需要使用底部和右側像素來適應您的物體尺寸。

.ibox{ 
    position:fixed; 
    bottom:30px; 
    right:20px; 
}