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

我有一个指令，防止固定位置DIV浮动在页脚DIV上，当用户滚动时，我们用10px的空格从页脚顶部确定固定位置DIV的底部位置，然后如果条件为真，则应用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');
                    }

                });

            }
        }

这是简单的东西，工作得很好，但是当条件为真时，我们在HTML视图中应用样式my div，该样式应用了指令，它在滚动时会疯狂地闪烁，有时由于疯狂的闪烁，一旦滚动完成，div的位置就错了这只是在极端情况下。有人知道我如何消除闪烁的问题吗？我还注意到，当应用了指令的固定DIV位于窗口顶部时，动态css规则似乎被删除了。。。这会增加闪烁

我的指令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>

---

这是逻辑上的一个小流程，当你向下滚动时，这很好，因为if语句将为true，但一旦你向上滚动，元素之间的位置差异将增大，此时样式属性被删除，然后再次触发，因为flowing div返回到它重叠的原始位置，这是一个可以解决你问题的实用工具

请注意if元素ScrollBottom+页面[0]。innerHeight-footerTop+10>=footerTop{

---

嗨，迈克，我有一种感觉，如果..else被触发了，你正在描述一个结果，可能做一个console.log来检查它。我注意到闪烁是由带有指令的div顶部击中窗口顶部时引起的，特别是在ios bounce上。这就是造成问题的原因。对我来说，当e元素相互冲突，它会触发if..否则多次指定底部，然后一次又一次地删除样式，我认为更固定的解决方案最适合您，如果您可以提供工作的plunker或JSFIDdle，我可以更准确地回答这是代码-这里看起来没有那么糟糕…我觉得这就像地狱一样闪烁如果我滚动到底部，然后再向后滚动，我已经完成了console.log in if and else，它看起来就像我期望的那样，if else if if被反复调用，处理一个fixYou绝对Genius！我只是没有发现。谢谢！