用于粘贴侧边栏的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

设置max-height为100%并增加margin-top找到合适的位置设置place max-height: 100%；边距顶部：50%；将 max-height 添加到 body 并将 margin top 添加到 div 希望这可以解决问题