透明跟踪滚动条二级导航源码
本帖最后由 Gask 于 2020-5-17 01:19 编辑效果演示：
http://i1.fuimg.com/600304/12941b387cd09a43.gif
html代码：
<!--头部-->
<div class="main">
<div class="header">
<div class="head">
<ul class="nav">
<li><a href="index.html" class="lis">首页</a></li>
<li class="lis"><a href="javascript:volid(0);" class="a_hover">产品中心<span class="head-ico1"></span></a>
<div class="nav_list1">
<div class="nav_txtcen"><a href="product/product-type-day.html">日抛型</a></div>
<div class="nav_txtcen"><a href="product/product-type-week.html">周抛型</a></div>
<div class="nav_txtcen"><a href="product/product-type-month.html">月抛型</a></div>
</div>
<li class="lis"><a href="javascript:volid(0);">关于产品<span class="head-ico2"></span></a>
<div class="nav_list2">
<div class="nav_txtcen"><a href="introduce.html">产品优势</a></div>
<div class="nav_txtcen"><a href="Expenditure.html">眼镜花费</a></div>
</div>
</li>
<li class="lis"><a href="javascript:volid(0);">服务中心<span class="head-ico3"></span></a>
<div class="nav_list3">
<div class="nav_txtcen"><a href="service.html">服务内容</a></div>
<div class="nav_txtcen"><a href="With-preparation.html">验配前准备</a></div>
<div class="nav_txtcen"><a href="inspect.html">验配及眼睑</a></div>
</div>
<li class="lis"><a href="javascript:volid(0);">技术支持<span class="head-ico4"></span></a>
<div class="nav_list4">
<div class="nav_txtcen"><a href="Handbook.html">初戴者指南</a></div>
<div class="nav_txtcen"><a href="Questions.html">你问我答</a></div>
<div class="nav_txtcen"><a href="Eyeproblem.html">眼睛问题</a></div>
</div>
<li class="lis"><a href="javascript:volid(0);">关于我们<span class="head-ico5"></span></a>
<div class="nav_list5">
<div class="nav_txtcen"><a href="ab.html">关于公司</a></div>
<div class="nav_txtcen"><a href="Contact.html">联系我们</a></div>
<div class="nav_txtcen"><a href="attract-investment.html">代{过}{滤}理加盟</a></div>
</div>
</li>
</ul>
<div class="right_head">
<ul>
<li>
<a href="Login.html">登录</a>
</li>
</ul>
</div>
<div class="right_log">
<ul>
<li>
<a href="register.html">注册</a>
</li>
</ul>
</div>
</div>
</div>
<!--头部结束-->
js代码：
//吾爱论坛52pojie.cn
//主页二级导航
function show(liObj){
var di=liObj.getElementsByTagName("div");//获取对象
di.style.display="block";//鼠标停留现实
liObj.style.background="rgba(170, 166, 166, 0.35)";//背景颜色
}
function hide(liObj){
var di=liObj.getElementsByTagName("div");//获取对象
di.style.display='none';//鼠标移开隐藏
liObj.style.background='none';//出去背景背景
}
//主页导航滚动跟踪
$(window).scroll(function() { //滚动事件
if ($(window).scrollTop() > 0) {//滚动条垂直位置如果大于0 (垂直滚动后，导航不在最顶部的时候触发)
$('.header').addClass('header_fix');//给div.header添加一个样式
} else {
$('.header').removeClass('header_fix');//否则清除把div.header清除样式呈现透明
}
});
{:301_998:}css就不放了影响帖子美观，如需下载源代码
{:301_1004:}新手只为学习研究制作，大佬勿喷！整体太简单，二级导航太简陋，欢迎大佬给意见
附源码下载地址：https://gask.lanzouj.com/icpgrsd xtvott 发表于 2020-5-16 23:21
就喜欢这种只有静态页面和前端的东西
没办法，新手就只能玩玩这种 很漂亮了 caojiale 发表于 2020-5-16 23:06
很漂亮了
谢谢谢谢 就喜欢这种只有静态页面和前端的东西 谢谢分享！ 顶顶顶。 谢谢分享了，有你更精彩 谢谢分享！ 谢谢分享！
页:
[1]
2