javascript - 当用户上下滚动页面时，如何使 HTML 小部件 "follow"保持可见？

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>

这会将对象放在右下角。您需要调整底部和右侧的 px 以适应对象的大小。

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