如何制作HTML小部件“;跟随“;当用户在页面上下滚动时，保持可见

how to make an HTML widget "follow" remain sight, as the user scrolls up and down the page?

本文关键字：滚动 上下 小部 HTML 何制作 跟随 用户      更新时间：2024-06-25

在我的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属性会"使"这个小部件沿着视线并保持可见？

.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;
}
相关文章：