怎么实现工具栏透明

怎么实现标题栏透明,例如

https://flyhigher.top/

这个站的移动逐渐从图片变成纯色

共 1 个回答
举头望涵涵,低头思第一。 https://www.dffzmxj.com

自己看了看这个网站,半透明是通过控制图片透明度做到的。 所以简述作者的代码:

<header class="mdui-appbar mdui-appbar-fixed mdui-shadow-0"><!--应用栏--></header>
<div class="background mdui-color-theme">
    <!--纯色背景-->
    <img src="some_photos.webp" id="opacity-controllable-img" /><!--图片-->
</div>
<main><!--正文区域--></main>
<script>
    window.onscroll = window.onresize = function(){
        //因为高度可能是动态的,所以两个时间都绑定
        let contentOffset = $('main').offset().top;
        let scroll = $('.mdui-appbar').offset().top;
        $('#opacity-controllable-img').css('opacity',1-Math.min(scroll/contentOffset,1));
        if(scroll>=contentOffset)
            $('.mdui-appbar').addClass('mdui-color-theme').removeClass('mdui-shadow-0');
        else
            $('.mdui-appbar').removeClass('mdui-color-theme').addClass('mdui-shadow-0');
    }
</script>

没有经过测试,请自行修bug。