您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
js实现淘宝固定侧边栏
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<style>

.top{

width:80%;

height:200px;

background-color:pink;

}

.banner{

width:80%;

height:400px;

background-color:aquamarine;

}

.main{

width:80%;

height:800px;

background-color:red;

}

.foot{

width:80%;

height:400px;

background-color:blanchedalmond;

}

.lan{

position:absolute;

right:10%;

top:400px;

width:80px;

height:80px;

background-color:cadetblue;

}

</style>

</head>

<body>

<divclass="top">头部区域</div>

<divclass="banner">banner区域</div>

<divclass="main">头部区域</div>

<divclass="foot">尾部区域</div>

<divclass="lan"></div>

<script>

varlan=document.querySelector('.lan');

document.addEventListener('scroll',function(){

console.log('jkjkkj');

vartop=window.pageYOffset;

if(top>200){

//改为固定定位。

vartopp=400-200+top;

lan.style.top=topp+'px';

if(top>600){

lan.innerHTML='返回顶部';

}else{

lan.innerHTML='';

}

}else{

lan.style.top=400+'px';

lan.innerHTML='';

}

})

</script>

</body>

</html>

上一篇:js仿京东放大镜 下一篇:js实现模态框的拖拽效果
发布日期:2022/7/3
手机扫二维码直达本页
发布时间:22:11:55
点击:95
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022