Angular-jQuery：将jQuery放在单独的文件中并得到错误“无法读取未定义的属性” top”

Question

I have a project base on AngularJS but I am trying to use a jQuery code in order to have a sticky sidebar working, when I put my code on Plunkr, everything works properly , but I do not know why isn't working on my project, and actually I have 2 problems, that's the 1st one.

The 2nd one: if I put my jQuery code in the same html file within <script></script> tags everything works fine. The problem is when I move that code to a separate file, then the error Cannot read property 'top' of undefined comes up to the browser console.

This is the HTML:

  <div class="col-md-3" id="sidebar">

    <div>

      <div class="panel">
        <div class="panel-group">
         ...
            </accordion-group>
          </accordion>
        </div>
      </div>

    </div>

  </div>

and here is the jQUery:

$(function() {
  var offset = $('#sidebar').offset(),
      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
      });
    }
  });
});

Remember to check my Plunkr

And also remember that the code works properly only when you include it on the HTML file, but once you put that jQuery code in a new file, then the error comes up.

Answer 1

Make sure you are calling the jquery file before you are trying to use the jquery function. Are you able to go into your sources in Chrome and see the jquery file? If not, something is wrong with your import.

Answer 2

Actually I just realized what is going on, all you need to do is set a angular.element(document).ready(function(){...} , the reason why the error appears is because the DOM is not completely load. And at the end I did an Angular Directive for better approach

So:

angular.module('myApp', [])
.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
            });
          };
        });
      });
    }
  };
});