Move element up against window scroll in a directive then apply fixed position

Question

I'm using an angular directive and binding the scroll on the window element. On scroll, I want to move the element against the direction of the scroll up. Then, when boundingRect reaches 50, I want to apply the fixed positioning. It's not working... What am I missing?

Directive

app.directive('liftToTop', ['$window', function($window){
  return {
    restrict: 'A', //attributes only
    link: function(scope, element, attrs) {
      const w = angular.element($window),
        topClass = attrs.liftToTop,
        initialOffset = element.offset().top;

      //bind the the scroll event  
      w.bind('scroll', function(){
        console.log(this.pageYOffset);

        let currentTop = element[0].getBoundingClientRect().top; //get current pos

        if(currentTop > 50) {
          //move element up/down against the scroll direction
          element.css('top', -1 * this.pageYOffset + 'px');
          element.removeClass(topClass);
        }

        //once current rect reaches 50, apply fixed
        if(currentTop === 50) {
          element.addClass(topClass);
        }
      });
    }
  };
}]);

CSS

.then-fixed-to-top-10 {
    position:fixed;
    top: 50px;
}

Markup

<h1 lift-to-top="then-fixed-to-top-10">{{hello}}</h1>

Here's non-working Plnkr

https://plnkr.co/edit/n4dQDzwK5T6e3TqWGlR3?p=preview

Answer 1

If I understood you correctly, the the main problem was the way you measured scroll value. Also, the last if statement had to be changed from === to > :

let currentTop = $(window).scrollTop(); //get current pos

if(currentTop < 50) {
    //move element up/down against the scroll direction
    element.css('top', -1 * this.pageYOffset + 'px');
    element.removeClass(topClass);
}

//once current rect reaches 50, apply fixed
if(currentTop > 50) {
    element.addClass(topClass);
}

To make the h1 stick without jumping to the left just add width:100% to the class:

.then-fixed-to-top-10 {
    position: fixed;
    top: 50px;
    width: 100%;
}

Answer 2

I needed to divide the initial offset by two to meet halfway. I also needed to set the moving div width to equal the parent div to prevent jumping.

Directive

app.directive('liftToTop', function($window){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            const w = angular.element($window),
                topClass = attrs.liftToTop,
                initialOffset = element.offset().top;

            w.bind('scroll', function(){
                let currentTop = w.scrollTop(); //get current pos

                if(currentTop < initialOffset / 2) {
                    //move element up/down against the scroll direction
                    element.css('top', -1 * this.pageYOffset + 'px');
                    element.removeClass(topClass);
                }

                //once current rect reaches 50, apply fixed
                if(currentTop > (initialOffset / 2)) {
                    element.addClass(topClass);
                    element.removeAttr('style');
                }
            });
        }
    };
});

CSS

.fixed-to-top-10 {
    position:fixed;
    top: 0px;
    width: 400px;
}