AngularJS/Bootstrap: How to fix accordion-heading on the top while scrolling

Question

I have directive having a template of an angularjs accordion list as follows, where each accordion-body section has a long content. So, when I expand an item in the list and scroll down to view all the content, the item header goes above the view port. I wanted to fix the header (accordion-heading) on the top while I am scrolling down to it's content. How can we achieve that?

Sample Code:

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)  {

            }
        };
    });

Answer 1

我有同样的问题，这就是我解决它的方法：

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

 overflow-y: hidden

查找您想要滚动并设置的面板（div）：

max-height: 400px     
overflow-y: auto

将max-height更改为适合您的值。 希望这有帮助。它对我有用。

这是它的样子：