Я пытаюсь сделать несколько липких заголовков для достижения своего рода "закрепления" строки и столбца. Я использую свойство 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>