Angular directive for affixing sidebar

Question

I'm trying to affix the sidebar with respective to my main content. I have tried directive here. Though I succeed with top affix i.e it works and stick to top when scroll down, but it fails to scroll in-case my sidebar content is longer. I want to fix it to top and move it scrollable according to main content. but if its content it more then screen it should scroll to down as well and stick to bottom at same time.

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

I want to be scrollable in case sidebar is longer than expected but it should stick to bottom in this case.

Answer 1

What about giving your menu position:fixed; and top:XXpx then it will always will stay in the same place even if you scroll your content down

.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>