用于附加侧边栏的 Angular 指令答案

【问题标题】：Angular directive for affixing sidebar用于附加侧边栏的 Angular 指令
【发布时间】：2016-08-28 18:33:06
【问题描述】：

我正在尝试将侧边栏与我的主要内容相关联。我在这里尝试过指令。虽然我在顶部词缀上取得了成功，即它在向下滚动时可以工作并保持在顶部，但是如果我的侧边栏内容更长，它就无法滚动。我想将它修复到顶部并根据主要内容将其移动到可滚动状态。但如果它的内容超过屏幕，它也应该向下滚动并同时停留在底部。

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

如果侧边栏比预期的长，我希望可以滚动，但在这种情况下它应该固定在底部。

【问题讨论】：

您为 .affix-top 提供了哪些样式？是否存在任何顶部导航栏？如果不尝试将 max-height: 100% 放在 .affix-top 中。 Fiddle 将有助于快速解决问题。

标签： javascript jquery html css angularjs

【解决方案1】：

设置 max-height 为 100% 并增加 margin-top 以找到合适的位置来设置位置最大高度：100%；最高保证金：50%；将 max-height 添加到 body 和 margin top 到 div 希望这可以解决问题

【讨论】：

【解决方案2】：

给你的菜单位置怎么样：固定;和 top: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>

【讨论】：

【解决方案3】：

这可能是旧帖子。但是，您是否考虑过将其设置为单独的视图并将其加载到索引页面中。而不是使用 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 -->

【讨论】：