翻页滚动条到内容最下方时，导航模块一直悬停在顶部的JS特效代码

稿源：互联网 2018-09-03 02:20:15 点击： 22781 撤稿纠错

js固定浮动在最上方的导航菜单模块，当屏幕下拉到下面的时候，这个模块一直悬停在顶部。。。

以下讨论的是和淘宝翻页滚动条导航悬停相关的翻页滚动条到内容最下方时，导航模块一直悬停在顶部的JS特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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 js.alixixi.com</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>
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 阿里西西 网页特效演示中心
 
 </div>
</body>
</html>

关于翻页滚动条到内容最下方时，导航模块一直悬停在顶部的JS特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090391845.shtml方便下次再访问哦。

·上一篇： 鼠标滑过导航菜单时缓缓动态显示下拉列表的特效
·下一篇： JS实现的鼠标点击灯泡图标来点亮或熄灭这盏灯的特效代码实例

翻页滚动条到内容最下方时，导航模块一直悬停在顶部的JS特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻