透明跟踪滚动条二级导航源码

Gask

效果演示：


html代码：

[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代码：

[JavaScript] 纯文本查看 复制代码

//吾爱论坛52pojie.cn
//主页二级导航
        function show(liObj){ 
                var di=liObj.getElementsByTagName("div")[0];//获取对象
                di.style.display="block";//鼠标停留现实
                liObj.style.background="rgba(170, 166, 166, 0.35)";//背景颜色
        }
        function hide(liObj){
                var di=liObj.getElementsByTagName("div")[0];//获取对象
                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清除样式呈现透明
        }
});

css就不放了影响帖子美观，如需下载源代码

新手只为学习研究制作，大佬勿喷！整体太简单，二级导航太简陋，欢迎大佬给意见

附源码下载地址：https://gask.lanzouj.com/icpgrsd

Gask

xtvott 发表于 2020-5-16 23:21
就喜欢这种只有静态页面和前端的东西

没办法，新手就只能玩玩这种

caojiale

很漂亮了

Gask

caojiale 发表于 2020-5-16 23:06
很漂亮了

谢谢谢谢

xtvott

就喜欢这种只有静态页面和前端的东西

anszyeah

谢谢分享！

乔碧萝殿下

顶顶顶。

cherrypi

谢谢分享了，有你更精彩

wincent

谢谢分享！

fc4lee

谢谢分享！