成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3 translate 完美詮釋表頭固定

Eirunye / 1220人閱讀

摘要：效果如下感覺是不是很和諧，而且代碼也少，不足的是以下不支持屬性，但現(xiàn)在也沒多少要考濾以下的兼容了吧，做前端老兼顧低版本的瀏覽器難免會(huì)讓自己束手束腳。。。。如果喜歡就推薦吧，不要問為什么直接推薦。。附加本電腦的效果

效果如下：

感覺是不是很和諧，而且代碼也少，不足的是IE9以下不支持transform屬性，但現(xiàn)在也沒多少要考濾IE9以下的兼容了吧，做前端老兼顧低版本的瀏覽器難免會(huì)讓自己束手束腳。。。。

下面來看下代碼吧

HTML結(jié)構(gòu)


    

        
            

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15

CSS樣式

提示：如果是加框表格，建議使用box-shadow: inset 1px 1px 0 0 #ccc;

JS腳本

可惡的是IE不支持thead的transform設(shè)置，但還是被小可找到了解決的方法，那就是給th設(shè)置transform屬性

// 需要引用jquery
var scrollTop;
$(".box").scroll(function() {
    scrollTop = this.scrollTop;
    $(this).find("thead tr th").css({
        "-webkit-transform": "translate(0, "+scrollTop+"px)",
        "-ms-transform": "translate(0, "+scrollTop+"px)",
        "transform": "translate(0, "+scrollTop+"px)"
    });
});

另外說明一點(diǎn)，這里的translate(x, y); 可以直接使用translateY(y);

目前來說這個(gè)效果在chrome上是最好的，但在遨游，火狐，IE效果就差強(qiáng)人意，有點(diǎn)閃眼，建議做個(gè)延遲處理，代碼如下

var scrollTop, timeoutFlag;
$(".box").scroll(function() {
    $(this).find("thead tr th").removeAttr("style");
    if(timeoutFlag) clearTimeout(timeoutFlag);
    timeoutFlag = setTimeout(function() {
        scrollTop = this.scrollTop;
        $(this).find("thead tr th").css({
            "-webkit-transform": "translateY("+scrollTop+"px)",
            "-ms-transform": "translateY("+scrollTop+"px)",
            "transform": "translateY("+scrollTop+"px)"
        });
    }.bind(this), 300);
});

完整代碼




    
    表頭固定
    
    


    

    

        
            

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15

代碼是不是真的很少呢，還在等什么？快點(diǎn)感受一下吧。。

如果喜歡就推薦吧，不要問為什么？直接推薦。。

附加本電腦的IE9效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81736.html

相關(guān)文章

  • vue移動(dòng)端復(fù)雜表格表頭，固定表頭與固定第一列

    摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實(shí)的表格的寬高來設(shè)定的。通過展示的表格的上下滾動(dòng)從而帶動(dòng)固定在第一列的向上滾動(dòng)，向左右滾動(dòng)帶動(dòng)覆蓋上表頭的的左右滾動(dòng)。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言 最近做移動(dòng)端的h5項(xiàng)目，要做一個(gè)可配置表頭的復(fù)雜表格，網(wǎng)上找了很久也沒什么好方法，結(jié)合網(wǎng)上...

    sarva 評(píng)論0 收藏0

  • CSS水平或垂直居中技巧

    摘要：適用情景單對(duì)象水平居中原理將子元素設(shè)置塊級(jí)表格，再設(shè)置水平居中。結(jié)語有些是水平居中，有些是垂直居中，將它們某兩個(gè)合在一起就能實(shí)現(xiàn)水平和垂直均居中。 前言 css水平和垂直居中是一個(gè)亙古不變的話題，它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧，在兩年前面試的時(shí)候，我完全不知道如何做到水平和垂直均居中的方法，那場(chǎng)面別提有多尷尬了（ps：特想找個(gè)地洞鉆進(jìn)去）。。。時(shí)隔兩年，對(duì)于這個(gè)...

    CastlePeaK 評(píng)論0 收藏0

  • CSS結(jié)構(gòu)與布局

    摘要：當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對(duì)定位對(duì)整個(gè)布局的影響也太過強(qiáng)烈。如此，對(duì)于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...

    figofuture 評(píng)論0 收藏0

  • CSS結(jié)構(gòu)與布局

    摘要：當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對(duì)定位對(duì)整個(gè)布局的影響也太過強(qiáng)烈。如此，對(duì)于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...

    BearyChat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<