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应为position: fixed。您提供的第一个CSS使用function onSubmit(token) { var siteurl= 'http://localhost/test/'; document.getElementById("register").submit(); var formdata = $('.register').serialize(); $.ajax({ method: "POST", url: siteurl+"app/ajax/test.php", data: formdata }) .done(function( msg ) { alert(msg); }); return false }，但不知道您为何更改了这些内容。

Answer 2

如果您需要某种动画，其中#contactAll跟随滚动并停在边界处，您可以使用jQuery并侦听scroll事件：

$(document).ready(function() {
  var elm = $("#contactAll");
  var lastScroll = $(window).scrollTop();

  $(document).scroll(function(ev) {
    var currScroll = $(window).scrollTop();
    var diffScroll = lastScroll - currScroll;
    var currPos = elm.position().top;
    var newPos = currPos + diffScroll;
    if (newPos < 0) newPos = 0;
    if (newPos > $(window).height() - elm.height()) newPos = $(window).height() - elm.height();
    elm.css({
      top: newPos
    });

    lastScroll = $(window).scrollTop();
  })

})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="wrapper">
</div>

Answer 3

我发现了问题！我已经为我的组件添加了动画，在这方面，我的组件添加了transform: translateX(0px)的样式。当我删除它时，固定位置再次起作用。我想我将不得不摆脱我的动画： - （

固定元素不随滚动移动

3 个答案: