js吸顶添加css样式

吸顶效果

 header {
            height: 40px;
        }

 section {
            width: 80%;
            margin: auto;
            height: 100px;
            border: 1px solid #000;
            background-color: skyblue;
            /* position: static;
            top: 0;
            left: 0;
            transform: translate(0, 0); */
        }

 let sec = document.querySelector('section')
        //偏移位置
        window.addEventListener('load', function () {
            console.log(sec.offsetTop, sec.offsetLeft);
        })
        window.addEventListener('scroll', function () {
            //滚动条
            let yScroll = document.documentElement.scrollTop || document.body.scrollTop
            let offtop = sec.offsetTop
            // if (offtop < yScroll) {
            //     sec.style.position = 'fixed'
            //     sec.style.left = '50%'
            //     sec.style.transform = 'translate( -50%,0)'
            // } else {
            //     sec.style.position = 'static'
            //     sec.style.transform = 'translate( 0,0)'
            // }
            if (offtop < yScroll) {
            //用cssText添加css新样式
                sec.style.cssText += ";
                position:fixed;
                top:0;left:50%;
                transform:translate(-50%,0)"
            } else {
                sec.style.cssText = '' //清除添加的css
            }
        })