Turn jQuery into Angular, fixed sidebar not working (?)

Question

I am converting a jQuery plugin into an Angular directive but still not working properly or: not working at all.

This is the behavior that I want to achieve

Here is also jsfiddle

Remember that all I want to achieve with this is the behavior on the left sidebar, where it’s sticky everywhere.

I did this with jQuery (I'm new to Angular) and I need it to work with Angular. Please go to the Plunkr Example , this is the behavior I want. Thanks in advance if some of you guys take the time to help me.

Take a look at jQuery code:

$(function() { var offset = $("#sidebar").offset(); var topPadding = 85; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 50 }); }; }); }); 

and here is my Angular directive:

 angular.module('capilleira.clickAndGambleWebApp.directives', []) .directive('sticky', function ($window) { return { restrict: 'A', controller: ($scope) link: function (scope, element, attrs) { var raw = element[0], offset = element.offset(), topPadding = 85; angular.element($window).bind('scroll', function () { console.log('SCROOOOOOOOOOOOOLLLL'); if ($window.scrollTop > offset.top) { raw.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } }); } } }); 

my directive is good that the console.log appears after scrolling.

Answer 1

He already works for me as my friends. This is normative work.

 angular.module('capilleira.clickAndGambleWebApp.directives', []) .directive('sticky', function($document) { return { restrict: 'A', link: function(scope, element, attrs) { angular.element(document).ready(function() { var offset = element.offset(), topPadding = 85; $document.scroll(function() { if ($document.scrollTop() > offset.top) { element.stop().animate({ marginTop: $document.scrollTop() - offset.top + topPadding }); } else { element.stop().animate({ marginTop: 0 }); }; }); }); } }; });