固定定位+渐隐渐现
1. 前言
相信大家日常用手机的时候会见过这种 页面 ：
这个需求也比较常见，而且这个交互 效果 看起来会更加的友好，不过需要用到一点点的 JS 来 获取 页面 滚动的距离，不会 JS 的同学先不要紧张，看不懂的话可以先记住怎么用就行。
2. 实例 代码
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
<!-- 在这里 用link 标签 引入 中文 渐变色 -->
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/chi nes e-gradient " >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : }
/* 令html和body全屏 显示 */
html, body { height : }
/* 上面的那栏 */
.top {
/* 设置为固定定位 */
position : fixed ;
/* 距离上边左边为0 */
top : ;
left : ;
/* 宽度铺满屏幕 */
width : ;
/* 给个合适的高度 */
height : px ;
/* 令其透明 */
opacity : ;
/* 蓝色背景 */
background : var ( --靛蓝 ) ;
}
.main {
/* 给个合适的高度 */
height : px ;
/* 渐变背景 */
background : var ( --湖蓝 ) ;
}
</ style >
</ head >
< body >
< div class = " top " > </ div >
< div class = " main " > </ div >
< script >
// 获取 固定栏
const dom = document . getElementsByClassName ( 'top' ) [ ]
window . addEventListener ( 'scroll' , _ => {
// 获取 偏移值
const top = document . documentElement . scrollTop
// 设置 一个 合适的范围
if ( top <= ) {
// 对opacity作计算，透明度从起始到1随偏移值而改变
const opacity = top /
// 令上栏的透明度变成计算后的透明度
dom . style . opacity = opacity
} else {
// 在移动一定范围后令其完全不透明
dom . style . opacity =
}
} )
</ script >
</ body >
</ html >
运行结果：
为了能让大家清晰的看到滑动 效果 ，这个案例使用了 chinese-gradient 来做背景渐变色。
这里就不用再给主盒子 加上 边距啦，因为在最上面的时候上栏是透明的，不会覆盖住 内容 的。
3. 结语
怎么样，是不是很炫酷呢？不过可惜无法用 CSS 来判断屏幕滑动了多少距离，所以渐隐渐现的 效果 用到了一点点的 JS。
上下栏布局简介 ? ? 非固定定位声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did254510