网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

仿淘宝商品详情和评价按钮悬停在浏览器顶部的js特效

发表于2016/12/15 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 2,578℃

我们在淘宝浏览商品详情时，当滚动条到底部时，我们会发现商品详情和累计评价按钮一直悬停在浏览器顶部。

下面是该js特效代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo by www.webym.net</title>
<style type="text/css">
.mydiv
{
height: 31px;
margin: 20px 0;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.mydiv span
{
display: inline-block;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
padding: 5px;
margin-right: 10px;
border-bottom: 0;
background-color: #fff;
}
</style>
<script type="text/javascript">
var mt = 0;
window.onload = function () {
var mydiv = document.getElementById("mydiv");
var mt = mydiv.offsetTop;
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t > mt) {
mydiv.style.position = "fixed";
mydiv.style.margin = "0";
mydiv.style.top = "0";
}
else {
mydiv.style.margin = "20px 0";
mydiv.style.position = "static";
}
}
}

</script>
</head>
<body>
<div style="height: 400px; border: 1px solid #000;">
</div>
<div class="mydiv" id="mydiv">
商品详情评价信息
</div>
<div>
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
webym.net 网页特效演示中心
 
</div>
</body>
</html>

运行代码提示：您可以先修改部分代码再运行。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/369.html