javascript - 使用纯 AngularJs 附加元素

Question

我正在尝试在我的页面上创建一个 affix 元素，并且我使用的是纯 AngularJs，没有 jquery。

我尝试了一些不同的解决方案来实现这一点，但它们似乎都不起作用。问题是在滚动后获取我要修复的元素的 offsetTop。

这是在一个指令中运行的，该指令在页面上的每个滚动条上执行。

这是我试过的代码:

.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 ..]

        })
    }
}]);

问题是，这些代码都不起作用。或者它有一个 undefined 值，或者它返回一个值 0，即使这个元素在 pageYoffset 上并且值为 700。

如何使用纯 AngularJs 或 vanilla Javascript 获取此元素的 offsetTop 值？我只是不在页面中加载 Jquery 以仅在该函数中使用。

Answer 1

经过大量研究和更改/统一大量代码后，我想出了这个解决方案。此代码将选择元素并创建一个 affix 效果。

代码:

• 只使用 AngularJs(不使用 Jquery)；
• 具有ID 和指令 的父元素以及具有;
的子元素
• 包含您想要的内容的子元素；
• 自定义 css 类以应用效果(css 也可以在指令内移动，但由于我将 sass 与其他功能一起使用，所以最好将它分开)；

page.html

<div class="parentElement" affix-me id="affix">
    <div class="childElement">
        <!-- your content here -->
    </div>
</div>

style.css

.affix {
    position:fixed !important;
    top: 0; //Change this value to match your needs;
    z-index: 990;
}

directive.js

.directive('affixMe', ['$timeout','$window', function($timeout, $window) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.width = element.prop('offsetWidth');
            var elWidth = scope.width + 'px',
                elChild = angular.element(element[0].querySelector(':first-child'));
                elChild.css('width', elWidth);
            angular.element($window).bind("scroll", function() {
                var affixElement = document.getElementById('affix'),
                    xPosition = 0,
                    yPosition = 0;
                function getPosition(element) {
                    while(element) {
                        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                        element = element.offsetParent;
                    }
                }
                getPosition(affixElement);
                if (yPosition >= 0) {
                    elChild.removeClass('affix');
                } else if ( yPosition < 0) {
                    elChild.addClass('affix');
                };
            });
        }
    };
}])

要做的事:##

我现在没有这样做，但是最好有一些东西来检查元素是否到达页面底部，或者它的父元素的末尾，然后停止顶部的词缀和将它应用在底部。

在我的例子中，我有一个 400px 页脚，词缀元素总是在页脚上重叠一点。

如果有人能提供帮助，那就太好了!

========== 旧答案 ==========
基于 answer here我进行了一些调整以使其适用于我的代码。

这是我正在使用的代码:

scope.affixFiltro = false;

var filtro = document.getElementById('filtro'),
    filtroOffset,
    yPosition = 0;

function getPosition(element) {
    while(element) {
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
}
getPosition(filtro);
if (yPosition >= 0) {
    filtroOffset = yPosition;
} else if ( yPosition < 0) {
    filtroOffset = 0;
};

//Enable/Disable affix class
if (filtroOffset == 0) { //check offset
    scope.affixFiltro = true; //enable affix class
} else {
    scope.affixFiltro = false; //disable affix class
}

基本上，由于 offsetTop 获取到第一个相对定位父级的距离，我们需要循环直到到达页面顶部。