I currently have a ul with a fixed height that contains a dynamic number of li elements. When there are too many elements, a scrollbar appears. By clicking on a li element, you can select it.
What I am aiming for is to have the active li element stay fixed at the top when scrolling above it and stay fixed at the bottom when scrolling below it. This way, the active li element is always visible, while the other elements scroll past it.
I have created a plunker to demonstrate the issue. I am using Angular, and I am unsure if this can be resolved using only CSS or if I need to use a directive.
Here is the HTML code:
div class="parent">
<div class="child1">
<input ng-model="vm.query" type="text" placeholder="Search" />
<ul >
<li ng-repeat="todo in todos" ng-class="{'active': todo.active}" ng-click="activeTodo($index)">
<a>{{todo.name}}</a>
</li>
</ul>
</div>
And the CSS code:
.parent{
display: flex;
}
.child1{
background-color: #eeeeee;
height: 500px;
overflow:scroll;
}
.active{
background-color: red;
position:fixed;
}
Thank you in advance!