当前位置：首页 > news >正文

CSS+js：顶部导航栏背景滚动渐变、顶部背景滚动渐变

news 来源：原创 2024/9/19 16:15:31

一、效果图

图1

图2

图3

二、gradual.html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>顶部导航栏渐变和顶部背景渐变</title></head><body><div class="content-root" id="contentRoot" onscroll="handleScroll()"><div class="content-top"><div class="tool-bar"><img class="back-img" src="../images/icon_title_back_black.png" /><span class="title">title样式</span><img class="search" src="../images/icon_search.png" /></div><div style="position: absolute; margin-top: 60px;">这里可以显示banner图</div></div><div style="height: 800px; background-color: aquamarine; position: relative;"></div></div></body><style type="text/css">body {position: absolute;width: 100%;height: 100%;padding: 0;margin: 0;top: 0;left: 0;bottom: 0;background-color #eee;/* overflow: auto;overflow-y: scroll; *//* ::-webkit-scrollbar {display: none;} */}.content-root {width: 100%;height: 100%;top: 0;left: 0;/* 开启 onscroll */overflow-y: scroll;position: absolute;padding-bottom: 2.5rem;background-color: #7ddcf8;}.content-top {width: 100%;height: 9.375rem;/* 如果需要让下面的内容覆盖在这上面，使用  position: absolute; */position: relative;background-color: #dddddd;padding-bottom: 4.125rem;align-items: center;}.tool-bar {width: 100%;height: 3.125rem;display: flex;/* 固定位置 */position: fixed;background-color: transparent;padding-left: 1rem;padding-bottom: 0.9375rem;/* 数值越大，表示越会显示在其他堆叠元素之上 */z-index: 999;align-items: flex-end;justify-content: space-between;box-sizing: border-box;}.back-img {width: 1.875rem;height: 1.25rem;margin-left: 0.16rem;}.title {position: absolute;font-family: PingFangSC, PingFang SC;font-size: 1.25rem;left: 50%;transform: translate(-50%, 0);text-align: center;}.search {position: absolute;right: 1rem;width: 1.25rem;height: 1.25rem;}</style><script>const contentTop = document.querySelector('.content-top')const toolBar = document.querySelector('.tool-bar')// 注意 div里 让 onscroll 调用handleScroll前提，content-root样式里添加了 overflow-y: scroll;function handleScroll() {let scrollTop = event.target.scrollTop;console.log('handleScroll scrollTop = ', scrollTop);// 设置背景颜色的透明度if (scrollTop >= 100) {toolBar.style.backgroundColor = "#ffffff";contentTop.style.backgroundColor = "#000000";} else if (scrollTop <= 0) {toolBar.style.backgroundColor = "transparent";contentTop.style.backgroundColor = "#dddddd";} else {toolBar.style.backgroundColor = `rgba(255, 255, 255,${scrollTop / (scrollTop + 40)})`contentTop.style.backgroundColor = `rgba(221,221,221,${scrollTop})`}}</script>
</html>