bodyEl.scrollTop is not a function error

[manar-mk]

Hi there. I am using webpack and angular 1.5 sometimes your plugin throws the bodyEl.scrollTop is not a function error error. How to fix that?

[harm-less]

Interesting, I see this topic about this on Stack. Perhaps that's the problem. Which browser are you using?

[AesSedai]

@harm-less I'm getting the same error in Chrome, Chrome Canary, Firefox, and Safari. Using angular 1.5.8 and angular-sticky v0.3.0. Error is as follows:

angular.self-7f8df3e….js?body=1:13921 TypeError: bodyEl.scrollTop is not a function
    at sticksAtPositionTop (angular-sticky.self-fba75ca….js?body=1:228)
    at sticksAtPosition (angular-sticky.self-fba75ca….js?body=1:215)
    at render (angular-sticky.self-fba75ca….js?body=1:242)
    at Object.$api.draw (angular-sticky.self-fba75ca….js?body=1:427)
    at angular-sticky.self-fba75ca….js?body=1:581
    at Object.forEach (angular.self-7f8df3e….js?body=1:322)
    at Object.$sticky.draw (angular-sticky.self-fba75ca….js?body=1:580)
    at angular-sticky.self-fba75ca….js?body=1:512
    at Object.forEach (angular.self-7f8df3e….js?body=1:336)
    at draw (angular-sticky.self-fba75ca….js?body=1:511)

Edit: Here's a simple codepen that demonstrates the issue for me. While the sticky works as intended, it does throw errors.

[harshalkhandare]

+1

[eavary]

Perhaps I'm missing something, but it looks like this issue is resolved by changing: bodyEl.scrollTop() to: bodyEl[0].scrollTop ...in the sticksAtPositionTop(scrolledDistance) and sticksAtPositionBottom(scrolledDistance) methods

[KaleRoberts]

Yes, you can resolve this issue by changing bodyEl.scrollTop() to bodyEl[0].scrollTop However, make sure you're also including jQuery in your project because this is not a pure angular plug-in unfortunately.

[eavary]

Thanks for the input... I just went ahead and forked the project and removed jQuery dependency (much like the pull requests on this project do). It has been working perfectly well without jQuery.

[henriquecholo]

Do you guys have another version of this in bower? I can not change the vendor in my project.

[codeuniquely]

Still an issue -

webpack:///./~/angular/angular.js?:14362 TypeError: bodyEl.scrollTop is not a function
    at sticksAtPositionTop (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:227)
    at sticksAtPosition (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:214)
    at render (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:241)
    at Object.$api.draw (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:426)
    at eval (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:580)
    at Object.forEach (webpack:///./~/angular/angular.js?:357)
    at Object.$sticky.draw (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:579)
    at eval (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:511)
    at Object.forEach (webpack:///./~/angular/angular.js?:371)
    at draw (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:510)
    at resize (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:507)
    at later (webpack:///./~/angular-sticky-plugin/dist/angular-sticky.js?:681)
    at eval (webpack:///./~/angular/angular.js?:19964)
    at completeOutstandingRequest (webpack:///./~/angular/angular.js?:6131)
    at eval (webpack:///./~/angular/angular.js?:6411)

I thought the tag line on the project page said: "Pure javascript AngularJS directive to make elements stick when scrolling"

and "This repository contains a set of native AngularJS directives and services. It can be used without any other dependency except of course Angular."

Is a new version going to appear, which makes a call with the [0] and/or checks for existence of scollTop before calling it ?

[mazavr]

I'm using jqLite in my angular project. So bodyEl[0].scrollTop is not available for that case.

[codeuniquely]

I'm using a completely native angular project (1.5.8) and WebPack 1.13.2 (so I also assume that i only have access to JQLite) - and as teh project does not have jQuery in the dependencies and its not loaded into the project I assume also that I don't have it loaded.

I have just now stopped the debugger on that offending line and entered bodyEl[0].scrollTop into the console window and got 197 as the result..

What about just checking for the existence of the methods - rather than forcing the exception to get thrown and causing the code to jump into the last defined catch / crashing ...

if (typeof bodyEl.scrollTop() !== 'undefined') { ... use it } else if (typeof bodyEl[0].scrollTop !== 'undefined') { .. use that instead ... }

[aplocher]

I think the requirements on the npm page should be updated to reflect the dependency on JQuery.

[aplocher]

If you're using WebPack and you have JQuery, but it's not loading (or loading too late), this is the solution I needed to fix the problem:

https://github.com/l-lin/angular-datatables/issues/993

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

[codeuniquely]

Why not just update the code so that when you want this value you always just call a small function call ...

scrollTop(elem) {
  if (typeof elem.scrollTop === 'function') {
    return elem.scrolltop();
  } else if (elem.constructor === Array && typeof elem[0].scrolltop !== 'undefined') {
    return elem[0].scrolltop;
  }
  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

Then you can call it like this when you need to and it'll work with JQuery being present and also when its not there ....

var offsetY = scrollTop(bodyEl);

[harm-less]

Hello everyone, It seems like I let all of you down by claiming it was a native Angular plugin. I'm sorry for the inconvenience I've caused.

However, I think I just fixed it as the codepen from @AesSedai works now (it was using the .js from master). In release 0.4.0 you'll find the code you're looking for.

Let me know if particular problems still remain. I'm closing this issue for now.