Angular для прикрепления боковой панели

Я пытаюсь привязать боковую панель соответствующим основному контенту. Я пробовал директиву здесь. Хотя я преуспеваю в топ-аффиксе, я работаю и придерживаюсь вершины при прокрутке вниз, но он не может прокручивать в случае, если содержимое боковых панелей больше. Я хочу исправить его сверху и переместить его прокручиваемым в соответствии с основным контентом. но если его содержимое больше, чем экран, оно также должно прокручиваться вниз и одновременно придерживаться дна.

<div class="background-white" sidebar-affix data-spy="affix" data-offset-top="80" data-offset-bottom="10">My sidebar content here</div>

.directive('sidebarAffix', function($window) {
    return {
        restrict: 'EA',
        link: function(scope, element, attrs) {
            var originOffsetTop = element[0].offsetTop;
            scope.condition     = function() {
                return $window.pageYOffset > originOffsetTop;
            };

            angular.element($window).bind('scroll', function() {
                scope.$apply(function() {
                    console.log($window.pageYOffset > originOffsetTop);
                    if (scope.condition()) {
                        angular.element(element).removeClass('affix-top');
                        angular.element(element).addClass('affix');
                    } else {
                        angular.element(element).addClass('affix-top');
                        angular.element(element).removeClass('affix');
                    }
                });
            });
        }
    };
})

Я хочу быть прокручиваемым, если боковая панель длиннее ожидаемой, но в этом случае она должна придерживаться нижней части.

Ответ 1

Как насчет предоставления позиции вашего меню: исправлено; и сверху: XXpx, то он всегда будет оставаться в том же месте, даже если вы прокрутите свой контент вниз

.wrapper > div{
  display:inline-block;
}
.side-bar  {
  position:fixed;  
  top:10px;
}
.content {
  
}

<div class='wrapper'>
  <div class='side-bar'></div>
  <div class='content'></div>
</div>

Ответ 2

Это может быть старый пост. Тем не менее, рассмотрели ли вы его отдельный просмотр и загрузили его на индексной странице. Вместо того, чтобы обрабатывать его с помощью css. Делая это, вы можете написать отдельный контроллер для доступа только к боковой панели, и, конечно, он будет исправлен, а также вы можете добавить другое представление, такое как верхний колонтитул, нижний колонтитул и определить отдельный контроллер для каждого из них и определить отдельный контейнер для загрузки основного содержимого. Это может быть не точный ответ, который вы попросили (директиву). Просто предложение.

Проводка образца html

<html lang="en" data-ng-app="SampleApp">
<head>
<body ng-controller="SampleController" >
    <!-- BEGIN HEADER -->
    <div data-ng-include="'header.html'" data-ng-controller="HeaderController" > </div>
    <!-- END HEADER -->

    <!-- BEGIN CONTAINER -->
    <div class="page-container" id="container">
        <!-- BEGIN SIDEBAR -->
        <div data-ng-include="sidebar.html'" data-ng-controller="SidebarController" > </div>
        <!-- END SIDEBAR -->
        <!-- BEGIN CONTENT -->
        <div >
            <div class="page-content">
                <!-- BEGIN ACTUAL CONTENT -->
                <div ui-view class="fade-in-up"> </div>
                <!-- END ACTUAL CONTENT -->
            </div>
        </div>
        <!-- END CONTENT -->
    </div>
    <!-- END CONTAINER -->
    <!-- BEGIN FOOTER -->
    <div data-ng-include="'footer.html'" data-ng-controller="FooterController" class="page-footer"> </div>
    <!-- END FOOTER -->
</body>
<!-- END BODY -->

Ответ 3

Установите максимальную высоту до 100% и увеличьте верхний край, чтобы найти подходящую позицию для установки места max-height: 100%; margin-top: 50%; добавление max-height в тело и край поля вверх, чтобы div надеется, что это исправить проблему.