滚动时的渐显渐隐标题

前端入坑纪 56

今天来分享个简单的标题效果...

好，详解如下！

OK，first things first！ 点我查看实际效果

你要变就变

HTML 结构

    <div class="mainWrps">
        <div id="titWrp">渐显渐隐标题</div>
        <!-- 一大片段落 -->
        <div>
            <p>1 paragraph</p>
                            ......
             <p>1 paragraph</p>
        </div>
    </div>

一个很普通绝对定位到顶部的标题,和一大堆占位用的段落P

CSS 结构

        html,
        body {
            padding: 0;
            margin: 0
        }

        body {
            background-color: aliceblue;
        }
        p{
            padding: 2% 6%
        }
        .mainWrps {
            padding-top: 47px;
        }

        #titWrp {
            background-color: rgba(255, 255, 255, 0);
            text-align: center;
            height: 47px;
            line-height: 47px;
            font-size: 17px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

对标题设置背景,后续都是操作这个背景的透明度

JavaScript 结构

        var tit = document.querySelector('#titWrp')
        var doc = document.body || document.documentElement
        // 当滚动时,用节流函数来间隔时间段触发绑定的函数操作
        window.addEventListener("scroll", _.throttle(function () {
            // 仅在小于100时,也就是滚动值100以内才执行对应的操作
            if(doc.scrollTop<100){
                var num = doc.scrollTop;
                console.log("num: ", num)
                num = num/100
                tit.style.backgroundColor="rgba(255,255,255,"+num+")"
            }else{
                tit.style.backgroundColor="rgba(255,255,255,1)"
            }
        }, false), 500)

1.引入lodash工具库,对频繁触发的滚动事件做节流.
2.将scollTop的值除100,刚刚好设置背景为,0到0.99间的小数值

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包