时间戳

首页 > 解决方案 > 用位置固定行和列：粘性

css - 用位置固定行和列：粘性

问题描述

我正在尝试制作一些粘性标题来实现一种“固定”行和列。我正在使用position:sticky;属性来实现这一点，但是有两个问题，当我垂直滚动时，我的固定列与固定行重叠（我不想这样做），当我一直滚动到右侧时，“固定"栏终于消失了。

知道我哪里出错了吗？这是我的代码：

https://codepen.io/kas84-the-decoder/pen/MWagrrE

function MainCtrl($scope) {
  
  $scope.body="hello world"
  //$scope.days = [1,2,3,4,5,6,7]
  $scope.days = new Array(16)
  $scope.employees=["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee", "Aidian", "Aidy", "Ailin", "Aiman", "Ainsley", "Ainslie", "Airen", "Airidas", "Airlie", "AJ", "Ajay", "A-Jay", "Ajayraj", "Akan", "Akram", "Al", "Ala", "Alan", "Alanas", "Alasdair", "Alastair", "Alber", "Albert", "Albie", "Aldred", "Alec", "Aled", "Aleem", "Aleksandar", "Aleksander", "Aleksandr", "Aleksandrs", "Alekzander", "Alessandro", "Alessio", "Alex", "Alexander", "Alexei", "Alexx", "Alexzander", "Alf", "Alfee", "Alfie", "Alfred", "Alfy", "Alhaji", "Al-Hassan", "Ali", "Aliekber", "Alieu", "Alihaider", "Alisdair", "Alishan", "Alistair", "Alistar", "Alister", "Aliyaan", "Allan", "Allan-Laiton", "Allen", "Allesandro", "Allister", "Ally", "Alphonse", "Altyiab", "Alum", "Alvern", "Alvin", "Alyas", "Amaan", "Aman", "Amani", "Ambanimoh", "Ameer", "Amgad", "Ami", "Amin", "Amir", "Ammaar", "Ammar", "Ammer", "Amolpreet", "Amos", "Amrinder", "Amrit", "Amro", "Anay", "Andrea", "Andreas", "Andrei", "Andrejs", "Andrew", "Andy", "Anees", "Anesu", "Angel", "Angelo", "Angus", "Anir", "Anis", "Anish", "Anmolpreet", "Annan", "Anndra", "Anselm", "Anthony", "Anthony-John", "Antoine", "Anton", "Antoni", "Antonio", "Antony", "Antonyo", "Anubhav", "Aodhan", "Aon", "Aonghus", "Apisai", "Arafat", "Aran", "Arandeep", "Arann", "Aray", "Arayan", "Archibald", "Archie", "Arda", "Ardal", "Ardeshir", "Areeb", "Areez", "Aref", "Arfin", "Argyle", "Argyll", "Ari", "Aria", "Arian", "Arihant", "Aristomenis", "Aristotelis", "Arjuna", "Arlo", "Armaan", "Arman", "Armen", "Arnab", "Arnav", "Arnold", "Aron", "Aronas", "Arran", "Arrham", "Arron", "Arryn", "Arsalan", "Artem", "Arthur", "Artur", "Arturo"];
}
.wrapper{
  width:100%;
  height:200px;
  overflow:scroll;
  background-color:#ddd;
}
.day{
  flex:1;
  min-width:150px;
  border-bottom:1px solid;
  border-right:1px solid;
  background-color:#ddd;


}
.emp-holder{
  width:100%;
  display:flex;
}
.emp-names{
  width:15%;
  position:sticky;
  left:0;
  background-color:red;
  border-right:1px solid;

}
.header-space{
  width:15%;
  position:sticky;
  z-index:99999;
  left:0;
  background:red;
  border-bottom:1px solid;
}
.emp-days{
  width:85%;
  display:flex;
}
.header{
  position:sticky;
  display:flex;
  width:100%;
  top:0;
}
.main{
  height:800px;
  width:100%;
}
<html lang="en" ng-app>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    
  </head>

<body ng-app>
  <div class="wrapper" ng-controller="MainCtrl">
  <div class="header">
    <div class="header-space"></div>
    <div style="width:85%;display:flex;">
      <div ng-repeat="day in days" class="day">{{$index+1}}</div>
    </div>
  </div>
  <div class="main">
    <div class="emp-holder" ng-repeat="emp in employees">
      <div class="emp-names">{{emp}}</div>
      <div class="emp-days">
        <div class="day" ng-repeat="day in days">
          {{$index+1}}
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

标签： css

解决方案

推荐阅读