I've been attempting to create a fixed element on my page using only AngularJs, without relying on jquery.
I've tried a few different methods but none of them are producing the desired result. The challenge lies in getting the offsetTop of the element I want to fix after scrolling.
This is all happening within a directive that runs every time the page is scrolled.
Here's the code I've experimented with:
.directive("scroll", ['$window', function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
//This code returns: '0'
var filter= document.getElementById('filter').offsetTop;
//This code returns: Error: [jqLite:nosel]
var filter = angular.element('#filter').prop('offsetTop');
//This code returns: [object HTMLDivElement]
var filter = angular.element(document.querySelector('.filter')).prop('offsetTop');
//This code returns: '0'
var filter = angular.element(document.getElementsByClassName('filter')).prop('offsetTop');
[.. more code ..]
})
}
}]);
The issue is that none of these codes are giving the correct output. It either results in an undefined value or returns a value of 0, even when the element should have an offset of 700.
Is there a way to retrieve the offsetTop value of this element using pure AngularJs or vanilla Javascript? I'm hesitant to include Jquery just for this one function.