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';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|