javascript - 用于附加侧边栏的 Angular 指令

Question

我正在尝试根据我的主要内容添加侧边栏。我在这里尝试过指令。虽然我成功地使用了顶部词缀，即向下滚动时它可以工作并坚持到顶部，但它无法滚动以防我的侧边栏内容更长。我想将其固定在顶部并根据主要内容将其移动为可滚动。但如果它的内容比屏幕多，它也应该向下滚动并同时固定在底部。

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

我想滚动以防边栏比预期的长，但在这种情况下它应该固定在底部。

Answer 1

给你的菜单 position:fixed;和 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>