当前位置:首页 > 开发代码

固定头部导航,下滑导航变颜色

小强的家   发布时间:2019-04-21   

 1.在导航css里设置position:fixed;z-index:1000;

2.下面是html


   <nav class="fh5co-nav" role="navigation">
        <div class="top-menu">
            <div class="container">
                <div class="row">
                    <div class="col-xs-3">
                        <div id="fh5co-logo " >
                            <div class="logo_flash">
                                <a href="index.html"><img class="logoBg" src="images/nav_slide.png" width="100%" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-9 text-right menu-1">
                        <ul>
                            <li class="active"><a href="index.html"></a></li>
                            <li class="has-dropdown"><a href="#">峰会详情</a>
                                <ul class="dropdown">
                                    <li><a href="#fh5co-course">议程</a></li>
                                    <li><a href="#fh5co-course-categories">演讲嘉宾</a></li>
                                    <li><a href="404.html">演讲申请</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#">赞助&展览</a>
                                <ul class="dropdown">
                                    <li><a href="404.html">历届展商名录</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#">华鹰奖</a>
                                <ul class="dropdown">
                                    <li><a href="404.html">关于华鹰奖</a></li>
                                    <li><a href="404.html">评审团</a></li>
                                    <li><a href="404.html">奖项申请</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#">参会&参展</a>
                                <ul class="dropdown">
                                    <li><a href="register-chsz.html">报名注册</a></li>
                                    <li><a href="404.html">会场信息</a></li>
                                    <li><a href="404.html">酒店&交通</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#">新闻&媒体</a>
                                <ul class="dropdown">
                                    <li><a href="404.html">新闻资讯</a></li>
                                    <li><a href="#fh5co-testimonial">合作媒体</a></li>
                                    <li><a href="404.html">媒体注册</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#">资源中心</a>
                                <ul class="dropdown">
                                    <li><a href="404.html">历届论坛</a></li>
                                    <li><a href="404.html">资料下载</a></li>
                                </ul>
                            </li>
                            <li class="has-dropdown"><a href="#fh5co-pricing">关于我们</a>
                            </li>
                            <li class="has-dropdown"><a href="404.html">联系我们</a>
                            </li>
                            <li class="btn-cta"><a href="#"><span>EN</span></a></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
    </nav>

3.下面是js

 <script type="text/javascript">
        $(document).scroll(function () {
            var scrollTop = $(document).scrollTop();
            if (scrollTop > '10') {
                $('.fh5co-nav').addClass('scrollNav');
                // $('.logoBg').attr("src", "images/nav_slide.png");
                $('.text-right ul li a').css('color','#fff')
            } else {
                $('.fh5co-nav').removeClass('scrollNav');
                // $('.logoBg').attr("src", "images/nav_slide.png");
                $('.text-right ul li a').css('color','#fff')
            }
        });
    </script>
 
 


相关文章:

固定头部导航,下滑导航变颜色评论(共有 0 条评论)

我要点评固定头部导航,下滑导航变颜色
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】