AngularJS/Bootstrap：如何在滚动时修复顶部的手风琴标题答案

【问题标题】：AngularJS/Bootstrap: How to fix accordion-heading on the top while scrollingAngularJS/Bootstrap：如何在滚动时修复顶部的手风琴标题
【发布时间】：2016-07-24 07:44:34
【问题描述】：

我有一个具有angularjsaccordion 列表模板的指令，如下所示，其中每个accordion-body 部分都有很长的内容。因此，当我展开列表中的项目并向下滚动以查看所有内容时，项目标题会出现在视口上方。当我向下滚动到它的内容时，我想修复顶部的标题 (accordion-heading)。我们怎样才能做到这一点？

示例代码：

list.html

<accordion close-others="true">
    <accordion-group ng-repeat="myObject in someArray"  is-open="myObject.isOpen">
        <accordion-heading ng-click="myObject.isOpen = !myObject.isOpen">
            <div >
                {{myObject.title}}
            </div>
        </accordion-heading>
        <accordion-body>
            <div>
                {{myObject.longContent}}
            </div>
        </accordion-body>
    </accordion-group>
</accordion>

list.js

angular.module('app.directives')
    .directive('listDirective', function () {

        return {
            restrict: "E",
            scope: '=',
            templateUrl: "list.html",
            link: function ($scope, $elem, $attr)  {

            }
        };
    });

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-bootstrap bootstrap-accordion

【解决方案1】：

我遇到了同样的问题，我就是这样解决的：

查找当前滚动的面板（div）（它包括手风琴标题）并设置：

 overflow-y: hidden

寻找你想要滚动和设置的面板（div）：

max-height: 400px     
overflow-y: auto

将最大高度更改为适合您的值。希望这有帮助。它对我有用。

如下所示：

【讨论】：