我有一个ul
固定高度li
,如果滚动条太多,则该高度包含动态的元素数量。您可以li
通过单击来选择一个元素。
我想要的是li
在上方滚动时处于活动状态的元素固定在顶部,在下方滚动时处于活动状态的li
元素固定在底部,因此活动元素始终处于显示状态,而其他li
元素只是滚动经过活动元素。
我做了个矮人。我正在使用Angular,我不知道这是否可以仅使用CSS来解决,或者是否需要指令等。
HTML:
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>
CSS:
.parent{
display: flex;
}
.child1{
background-color: #eeeeee;
height: 500px;
overflow:scroll;
}
.active{
background-color: red;
position:fixed;
}
提前致谢!
我使用一些CSS并进行了指令处理。
在这里做了一个矮人。
我制定了每个li
元素都可以得到的指令。然后在指令中使用jquery,我得到了必要的元素,例如div
具有滚动条,当前li
元素等。
两个布尔值,用于检查li
固定在顶部还是底部。然后只需检查当前的scrollPosition(scrollTop)是否高于或低于当前li
元素即可。并且它还会检查该li
元素是否也连接了活动布尔值。
return {
restrict: 'A',
link: function($scope, element, attributes){
var scrollDiv = $('#scrollDiv'),
liElement = element,
liElementTop = parseInt(liElement.offset().top),
scrollDivTop = parseInt(scrollDiv.offset().top),
isFixedTop = false,
isFixedBottom = false;
liElement.width(scrollDiv.width());
scrollDiv.on('scroll', function(){
var scrollTop = scrollDiv.scrollTop();
if (!isFixedBottom && !isFixedTop && scrollTop <= liElementTop - (scrollDivTop+(scrollDiv.height()-liElement.height())) && liElement.hasClass("active")) {
isFixedBottom = true;
liElement.css({'position': 'fixed', 'top': scrollDivTop+(scrollDiv.height()-liElement.height()+1),'list-style-type':'none','z-index':'10'});
} else if (isFixedBottom && !isFixedTop && scrollTop >= liElementTop - (scrollDivTop+(scrollDiv.height()-liElement.height()))) {
isFixedBottom = false;
liElement.css({'position': 'static', 'top': 0});
}
else if (!isFixedTop && !isFixedBottom && scrollTop >= liElementTop - scrollDivTop && liElement.hasClass("active")) {
isFixedTop = true;
liElement.css({'position': 'fixed', 'top': scrollDivTop,'list-style-type':'none','z-index':'10'});
}
else if (isFixedTop && !isFixedBottom && scrollTop <= liElementTop - scrollDivTop) {
isFixedTop = false;
liElement.css({'position': 'static', 'top': 0});
}
})
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句