头部跟距滚动高度变色

最新推荐文章于 2024-11-17 12:40:55 发布

原创最新推荐文章于 2024-11-17 12:40:55 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

pc 专栏收录该内容

6 篇文章

订阅专栏

html

 <div class="header">
        <div class="bg"></div>
   </div>

css

.header{ height:1rem; border-bottom:.01rem solid #313131; position: fixed; top:0; left:0; width:100%; z-index:50; }
.header .bg{ width:100%; height:100%; background:#000; top:0; left:0; position:absolute; opacity:0; }

var headerH = $('.header').height();   //头部高度
    $(document).scroll(function(event) {
        var scrT = $(window).scrollTop();
        $('.header .bg').css({
            '-o-opacity':scrT/headerH,
            '-ms-opacity':scrT/headerH,
            '-moz-opacity':scrT/headerH,
            '-webkit-opacity':scrT/headerH,
            'opacity':scrT/headerH
        })
    });