chrome下positon:fixed無效或抖動的解決辦法

先來看一下我們要實現的效果

我想這種效果大家都有實現過，或者說吸頂的效果和這差不多

頁面結構

js代碼如下

/*吸頂*/
        var $child = $("#child_3");
        var $parent=$("#parent_3");
        var w = $parent.width();
        var tH = $child.offset().top;
        $(window).resize(function () {//響應
            w = $parent.width();
            $child.css({"width": w})
        });
        $('body').scroll(function () {//iframe下的body
            $child.css({"width": w});
            $child.css({"position": "fixed", "top": "0",WebkitTransform:'translateZ(0px)'})
        });

 

WebkitTransform:'translateZ(0px)'就是關鍵所在 如果不加這句在其他瀏覽器和大多chrome版本下是ok的 ，但在某些chrome版本下"position": "fixed",就無效了，加了這句既可解決fiexed無效，也可解決抖動問題