滚动时如何保持<li>元素固定在<ul>元素的顶部和底部

Devl11

我有一个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;
}

提前致谢!

Devl11

我使用一些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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

固定在可滚动元素底部的位置

来自分类Dev

固定在页面底部的可滚动元素

来自分类Dev

如何从UL LI元素正确提交表单?

来自分类Dev

如何创建嵌套的li-ul-li元素

来自分类Dev

如何在多级 UL/LI 元素中获取先前的 LI

来自分类Dev

悬停子<ul> <li>元素时,更改父<ul> <li>元素的样式

来自分类Dev

当相关元素在滚动时触及固定元素底部和顶部时触发事件?

来自分类Dev

当导航栏固定在滚动条顶部时,添加品牌徽标和li

来自分类Dev

将元素固定在滚动页面的顶部

来自分类Dev

DIV中的长UL列表,自动滚动到LI元素

来自分类Dev

DIV中的长UL列表,自动滚动到LI元素

来自分类Dev

滚动时如何将表单元素固定在显示的屏幕底部?

来自分类Dev

AngularJs-<ul> <li>元素在选中其复选框时位于顶部

来自分类Dev

单击li元素后如何切换ul的ID?

来自分类Dev

单击li元素后如何切换ul的ID?

来自分类Dev

如何使视图控制器的顶部和底部元素保持原位,而中间的元素具有垂直滚动的元素?

来自分类Dev

如何在调整大小时将html元素固定在窗口的底部,而不是在滚动时将其固定在窗口的底部?

来自分类Dev

在 ul 元素中定位 li 元素

来自分类Dev

如何使用python单击带有硒的<ul>和<li>元素中的<a>元素列表?

来自分类Dev

当其他li设置为ul时,如何从ul设置为inline-block的ul的第一个li元素中删除边距

来自分类Dev

当其他li设置为ul时,如何从ul设置为inline-block的ul中的第一个li元素中删除边距

来自分类Dev

使元素固定在屏幕底部

来自分类Dev

将元素固定在滚动条上(当其不在页面顶部时)

来自分类Dev

如何增加顶部边框距离?(ul li)

来自分类Dev

将<li>元素隐藏在<ul>中

来自分类Dev

从ul javascript中添加/删除<li>元素

来自分类Dev

将<ul> <li>元素向左对齐

来自分类Dev

将<li>元素隐藏在<ul>中

来自分类Dev

jQuery单击事件删除ul li元素

Related 相关文章

  1. 1

    固定在可滚动元素底部的位置

  2. 2

    固定在页面底部的可滚动元素

  3. 3

    如何从UL LI元素正确提交表单?

  4. 4

    如何创建嵌套的li-ul-li元素

  5. 5

    如何在多级 UL/LI 元素中获取先前的 LI

  6. 6

    悬停子<ul> <li>元素时,更改父<ul> <li>元素的样式

  7. 7

    当相关元素在滚动时触及固定元素底部和顶部时触发事件?

  8. 8

    当导航栏固定在滚动条顶部时,添加品牌徽标和li

  9. 9

    将元素固定在滚动页面的顶部

  10. 10

    DIV中的长UL列表,自动滚动到LI元素

  11. 11

    DIV中的长UL列表,自动滚动到LI元素

  12. 12

    滚动时如何将表单元素固定在显示的屏幕底部?

  13. 13

    AngularJs-<ul> <li>元素在选中其复选框时位于顶部

  14. 14

    单击li元素后如何切换ul的ID?

  15. 15

    单击li元素后如何切换ul的ID?

  16. 16

    如何使视图控制器的顶部和底部元素保持原位,而中间的元素具有垂直滚动的元素?

  17. 17

    如何在调整大小时将html元素固定在窗口的底部,而不是在滚动时将其固定在窗口的底部?

  18. 18

    在 ul 元素中定位 li 元素

  19. 19

    如何使用python单击带有硒的<ul>和<li>元素中的<a>元素列表?

  20. 20

    当其他li设置为ul时,如何从ul设置为inline-block的ul的第一个li元素中删除边距

  21. 21

    当其他li设置为ul时,如何从ul设置为inline-block的ul中的第一个li元素中删除边距

  22. 22

    使元素固定在屏幕底部

  23. 23

    将元素固定在滚动条上(当其不在页面顶部时)

  24. 24

    如何增加顶部边框距离?(ul li)

  25. 25

    将<li>元素隐藏在<ul>中

  26. 26

    从ul javascript中添加/删除<li>元素

  27. 27

    将<ul> <li>元素向左对齐

  28. 28

    将<li>元素隐藏在<ul>中

  29. 29

    jQuery单击事件删除ul li元素

热门标签

归档