30 lines
970 B
JavaScript
30 lines
970 B
JavaScript
/**
|
||
* 1、使用哪一个事件
|
||
* 使用onscroll，此事件移动端与PC端都有效。
|
||
* 2、如何获取滚动条位置
|
||
* 获取PC端滚动条位置：document.documentElement.scrollTop
|
||
* 获取移动端滚动条位置：document.body.scrollTop
|
||
* 3、如何获取视口宽度
|
||
* document.documentElement.clientWidth 移动端与PC端都有效。
|
||
*/
|
||
window.onload = function(){
|
||
document.onscroll = function(){
|
||
//获取滚动条位置
|
||
let s1 = document.documentElement.scrollTop;
|
||
let s2 = document.body.scrollTop;
|
||
let scroll = s1==0?s2:s1;
|
||
//获取视口宽度
|
||
let width = document.documentElement.clientWidth;
|
||
//获取顶部固定块
|
||
let search = document.getElementById('fixedBox');
|
||
//判断滚动条超过视口宽度的12%时，搜索块变固定定位
|
||
if(scroll>width*0.12){
|
||
search.style.position = 'fixed';
|
||
search.style.left = '0';
|
||
search.style.top = '0';
|
||
}else{
|
||
search.style.position = 'static';
|
||
}
|
||
|
||
}
|
||
} |