javascript - 滚动时如何使 元素固定在 元素的顶部和底部

Question

我有一个固定高度的 ul，它包含动态数量的 li 元素，如果出现太多滚动条的话。您可以通过单击选择 li 元素。

我想要的是激活的 li 元素，如果在其上方滚动则固定在顶部，如果在其下方滚动则固定在底部，因此事件的 li元素始终显示，而其他 li 元素只是滚动到事件元素旁边。

我做了一个plunker .我正在使用 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;
}

提前致谢!

Answer 1

我使用一些 CSS 并制定了一个指令来管理它。

做了个傻瓜 here .

我做了一个指令，每个 li 元素都得到了。然后在指令中使用 jquery，我得到了必要的元素，例如具有滚动条的 div、当前的 li 元素等。

两个 bool 值，用于检查 li 是否固定在顶部或底部。然后检查当前的 scrollPosition(scrollTop) 是高于还是低于当前的 li 元素。它还会检查 li 元素是否也附加了事件 bool 值。

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});
                }

            })



        }
    };