用於粘貼側邊欄的Angular指令
[英]Angular directive for affixing sidebar
問題描述
我正在嘗試將側邊欄添加到我的主要內容中。 我在這里試過指令。 雖然我通過頂部詞綴獲得成功，即它可以正常工作並向下滾動時保持頂部，但它無法滾動以防我的側邊欄內容更長。 我想將它修復到頂部並根據主要內容將其移動。 但如果它的內容更多，那么它應該向下滾動，同時堅持到底部。
<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');
}
});
});
}
};
})
我希望可以滾動，以防側欄長於預期，但在這種情況下它應該堅持到底部。
3 個解決方案
解決方案1
1 2016-05-16 07:10:40
給你的菜單位置怎么樣：固定; 和頂部：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
0 2016-05-16 12:03:13
這可能是舊帖子。 但是，您是否考慮將其作為單獨的視圖並將其加載到索引頁中。 而不是使用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
-1 2016-05-11 09:42:02
將max-height設置為100％並增加margin-top以找到適當的位置來設置max-height：100％; 保證金最高限額：50％; 將max-height添加到body和margin top到div希望這可以解決問題
Angular 4側欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.