当用户在页面上下滚动时，如何使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; 
}