Question

我有一个指令阻止固定位置DIV浮动在页脚DIV上，当用户滚动时我们确定从页脚顶部确定固定DIV底部的位置（10px空间）然后在条件为真时应用CSS样式，如果条件为false，我们删除样式，请参阅下面的内容......

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视图中应用样式我的div（已经应用了指令）在滚动时闪烁疯狂，有时由于疯狂闪烁的位置一旦滚动完成，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>

Answer 1

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

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

http://plnkr.co/edit/cvPNoF?p=preview

AngularJS指令在滚动时设置CSS闪烁

1 个答案: