html - 固定元素不随滚动移动

Question

我有一个 div:

<div id="contactAll" *ngIf="contactArray.length">
    <p>Selected users:</p>
    <p *ngFor="let contact of contactArray">{{contact.firstname}} {{contact.lastname}}</p>
    <button class="btn-submit" (click)="contactAll()">Contact All</button>
</div>

使用以下 CSS:

#contactAll{
position: fixed;
text-align: center;
width: 200px;
height: 250px;
border: 2px solid black;
right: 55px;
top: 50%;
overflow-y: scroll;
}

所需功能:我希望 div 始终可见，并随着用户在我的页面上滚动而跟随屏幕。我如何实现这一点？

它早些时候可以工作，但由于某种原因它不再工作了。可能是什么问题？

编辑:

完整的 HTML 文件:

<div id="searchContainer">
<h2>Your search yielded {{resultCount}} results</h2>
<div id="pagesContainer">
       <span [class.selected]="currentPage == i" *ngFor="let page of searchPages; let i = index" (click)="setPage(i)">{{i+1}}</span>
</div>
<div class="searchPageContainer" *ngFor="let page of searchPages; let i = index">
    <div class="searchPage" *ngIf="currentPage == i">
        <div class="searchResult" *ngFor="let result of page">
                <input #checkbox type="checkbox" (click)="checkProfile(checkbox, result.user)">
                <table align="center">
                    <th id="usercolumn">
                        <ul id="userlist"> 
                            <li class="searchlistitem" id="resultName">&nbsp;{{result?.user.firstname}} {{result?.user.lastname}}</li>
                            <li class="searchlistitem" id="resultEmail">&nbsp;{{result?.user.email}}</li>
                            <li class="searchlistitem" id="resultCity">&nbsp;{{result?.user.city}}</li>
                            <li class="searchlistitem" id="resultBirthday">&nbsp;{{result?.user.birthday | date}}</li>
                            <li class="searchlistitem" id="resultNationality">&nbsp;{{result?.user.nationality}}</li>
                            <li class="searchlistitem" id="resultGender">&nbsp;{{result?.user.gender}}</li>
                            <li class="searchlistitem" id="resultStudy">&nbsp;{{result?.study}}</li>
                        </ul>
                    </th>
                    <th id="skillscolumn">
                        <ul id="skillslist">
                            <h2>Skills</h2>
                            <li *ngFor="let skill of result.skills">{{skill}}</li>
                        </ul>
                    </th>
                    <th id="languagescolumn">
                        <ul id="languageslist"> 
                            <h2>Languages</h2>
                            <li *ngFor="let language of result.languages">{{language}}</li>
                        </ul>
                    </th>
                </table>

            <div id="button-container">
                <button (click)="viewProfile(result.user.userID)"class="btn-submit">View Profile</button>
                <button (click)="sendMail(result.user)" class="btn-submit">Contact</button>
            </div>
        </div>
    </div>
</div>

<div id="pagesContainerBottom">
       <span [class.selected]="currentPage == i" *ngFor="let page of searchPages; let i = index" (click)="setPage(i)">{{i+1}}</span>
</div>
<div id="contactAll" *ngIf="contactArray.length">
    <p>Selected users:</p>
    <p *ngFor="let contact of contactArray">{{contact.firstname}} {{contact.lastname}}</p>
    <button class="btn-submit" (click)="contactAll()">Contact All</button>
</div>
</div>

CSS 文件:

#searchContainer{
    margin-top: 15px;
    border-top: 3px solid black;
}

span{
    font-weight: bold;
    padding-right: 2px;
    padding-left: 2px;
    font-size: 20px;
    margin-right: 4px;
    background-color: white; 
    border: 1px solid black;
    border-radius: 2px;
    transition: border-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
}

span:hover{
    cursor: pointer;
    background-color: #1283b4
}

#pagesContainer{
    margin: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 5px;
    margin-top: 5px;
    height: 40px;
    overflow: scroll;
    overflow-y: hidden;
}

#pagesContainer::-webkit-scrollbar{
    border-radius: 5px;
    width: 1em;
}

#pagesContainer::-webkit-scrollbar-track {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}

#pagesContainer::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #19a0da;
    outline: 1px solid slategrey;
}

#pagesContainerBottom {
    margin: auto;
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    height: 40px;
}

#pagesContainerBottom::-webkit-scrollbar{
    border-radius: 5px;
    width: 1em;
}

#pagesContainerBottom::-webkit-scrollbar-track {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}

#pagesContainerBottom::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #19a0da;
    outline: 1px solid slategrey;
}

.searchPage{
    width: 700px;
    height: 100%;
}

.searchResult{
    width: 85%;
    height: 300px;
    background-color: white;
    border-radius: 15px;
    margin: auto;
    margin-top: 15px;
    border: 2px solid black;
    box-shadow: 0 13px 4px -8px rgba(0,0,0,0.75);
}

.searchResult:hover input[type="checkbox"]{
    visibility: visible;
}

.selected {
    background-color: #19a0da;
    outline: none;
}

.searchlistitem{
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
}

#button-container{
    text-align: center;
    position: relative;
   bottom: 50px;
}

input[type="checkbox"]{
    visibility: hidden;
    outline: none;
    float: right;
    margin-right: 10px;
    margin-top: 10px;

    transform: scale(2);
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}

input[type="checkbox"]:checked{
    visibility: visible;
}

#contactAll{
    position: fixed;
    text-align: center;
    width: 200px;
    height: 250px;
    border: 2px solid black;
    right: 55px;
    top: 50%;
    overflow-y: scroll;
}

#userlist, #skillslist, #languageslist{
    list-style-type: none;
    text-align: left;
    padding: 0;
}

问题展示:

https://gyazo.com/fe9887a25c84c5e88788c7049c47b9df

Answer 1

检查完整的 CSS 文件。 #contactAll 正在使用 position: absolute，它应该是 position: fixed。您提供的第一个 CSS 使用了 position: fixed，不知道您为什么要更改它。