在IE11中通过css()缓慢进行jQuery导航重定位

时间:2014-01-29 03:05:25

标签: javascript android jquery css performance

我意识到很多人在IE中遇到各种jQuery问题。 我已经阅读了很多这些但是找不到我的问题的解决方案。

我的问题可以被描述为相对于滚动位置(通过.css()方法)定位的导航栏的“滞后”或“跳跃”定位。

我还没有机会在其他IE版本中进行测试,但IE11(PC)和Chrome(Android平板电脑)是两种浏览器,它们在正确的位置显示导航并且滞后。

要查看问题,请打开IE11,滚动到页面底部并开始向上滚动。 http://dev.vlcek.me/sample6n.html

我想知道是否有更好(更干净)的方法来编码所需的效果,以提高IE11和Android移动设备的性能。

提前感谢任何提示!

这是我的代码:

<script type="text/javascript">
    $(document).ready(function() {


        var lastScrollTop = 0;
        var curr = 0; 
        var scrollingDown = 0;
        var scrollingUp = 0;

        $(window).scroll(function(event){

                       curr = $(this).scrollTop();

                       if (lastScrollTop < curr){
                            // SCROLLING DOWN
                            $("#status").text('DOWN');

                            scrollingDown = curr;
                            $("#scrollingDown").text("Down: " + scrollingDown);

                       } else{
                            // SCROLLING UP
                            $("#status").text('UP');

                            $("#nav-wrapper").css('position', 'relative');
                            $("#nav-wrapper").css('top',  curr - 100);

                            diff = scrollingDown - curr;
                            if (diff <= 100){
                                $("#diff").text("diff (100): " + diff);
                                $("#nav-wrapper").css('top',  (curr - 100) + diff );
                            }else{
                                $("#diff").text("diff: " + diff);
                                $("#nav-wrapper").css('top',  curr );
                            }


                       }

                    lastScrollTop = curr;

                $("#curr").text('curr: ' + curr);   

        }); // scroll()

    }); // docready

1 个答案:

答案 0 :(得分:1)

而不是更改标题上的顶部样式,为什么不在向上滚动时将其设为position:fixed?它会给你相同的效果,但是没有常量的css更新,并且在IE中滚动时会看起来正确。