用于附加侧边栏的 Angular 指令
Posted
技术标签:
【中文标题】用于附加侧边栏的 Angular 指令【英文标题】：Angular directive for affixing sidebar 【发布时间】：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 将有助于快速解决问题。 【参考方案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 -->
【讨论】：
以上是关于用于附加侧边栏的 Angular 指令的主要内容，如果未能解决你的问题，请参考以下文章
基于Angular2+的Tab页+侧边菜单比较完整的解决方案