Javascript 在指令中将元素向上移动到窗口滚动，然后应用固定位置

我正在使用angular指令并将滚动条绑定到window元素上。在scroll上，我想逆着向上滚动的方向移动元素。然后，当

boundingRect

达到50时，我想应用固定定位。它不起作用了。。。我错过了什么

指令

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);
        }
      });
    }
  };
}]);

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

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

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

标记

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

{{hello}

这是非工作Plnkr

---

如果我理解正确，主要问题是您测量滚动值的方式。此外，最后一个if语句必须从

==

更改为

：

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);
}

---

我需要将初始偏移量除以2，以达到一半。我还需要将移动div宽度设置为等于父div，以防止跳跃

指令

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);
        }
      });
    }
  };
}]);

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');
                }
            });
        }
    };
});

---

不完全是。我需要元素相对于客户端屏幕的当前位置，而不是

scrollTop（）

给出的滚动距离。细微差别：）。当我向下滚动时，元素应该向上移动，直到达到50px，然后它应该保持固定。但一旦它固定，它就永远不会松开自己。你想要吗？如果我继续向下滚动，它应该会粘在顶部。如果我向上滚动，超过它卡住的点（50px），我可以将类移除到

fixed

it，不是吗？但您是通过对象的位置来测量的。一旦它被卡住，它的位置将永远不会改变，从而触发你的“松开”动作。至少我把它粘上了又解开了。