AngularJS指令，用于设置滚动时的CSS闪烁

Question

我有一个指令，防止固定位置div浮动在页脚div上，发生的事情是当用户滚动时，我们从页脚顶部确定固定div底部的位置(有10px的空间)，然后应用CSS样式，如果条件为真，我们删除样式，如果条件为假，见下文…

return {
            restrict: 'A',
            link: function (scope, element) {
                var page = angular.element(window);
                page.bind('scroll resize', function () {
                    var elementScrollBottom = element[0].getBoundingClientRect().bottom,
                        footerTop = document.getElementById('footerTop').getBoundingClientRect().top;

                    if (elementScrollBottom + 10 >= footerTop) {
                        element.css({'bottom': (page[0].innerHeight - footerTop) + 10 + 'px'}) ;
                    } else {
                        element.removeAttr('style');
                    }
                });
            }
        }

这是简单的东西，工作得很好，但是当条件为真，我们应用样式mydiv在HTML视图(有指令应用到它)闪烁像疯狂，而滚动，有时由于疯狂的闪烁div的位置将是错误的，一旦滚动完成(这只是在极端情况下)。有人知道我怎样才能消除闪烁的问题吗?我还注意到，动态css规则似乎被删除时，固定的DIV(与指令应用于它的DIV)是在窗口的顶部…这会增加闪烁。

我的指令的HTML看起来像这样(减去关于计算机化css的注释):

<!-- the parent has the following CSS rules -->
<!--
    width: 260px;
    max-width: 260px;
    padding: 0;
    position: relative;
    z-index: 150;
-->
<div class="pull-right">  
    <!-- the child div with directive has the following CSS rules --> 
    <!--
    position: fixed;
    width: 260px;
    -->
    <div data-my-directive-name>
        Lots of Content here!!!!
    </div>
</div>

Answer 1

这是逻辑上的一个小流，当你向下滚动时它很好，因为if语句将为真，但是一旦你向上滚动，元素之间的位置差异将会增长，这是当style属性被删除时，然后再次触发，因为流动的div返回到它重叠的原始位置，这里是一个工作的plunker与你的问题的答案，

注意if (elementScrollBottom + (page[0].innerHeight - footerTop) + 10 >= footerTop) {

http://plnkr.co/edit/cvPNoF?p =预览