码迷,mamicode.com
首页 > Web开发 > 详细

JS实现悬浮导航的制作(附源码)--web前端

时间:2017-07-15 17:44:31      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:class   addclass   type   img   position   css   com   play   团队   

思想:导航在这里只有两种状态,一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难。

1、基础页面(HTML+CSS)

效果图:

技术分享

代码如下: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <!--页面三要素-->
    <title>JS实现悬浮导航</title>
    <meta name="Keywords" content="关键词">
    <meta name="description" content="描述">
<style type="text/css">
    *{margin: 0;padding: 0;}
    #top{margin: 0 auto;width: 1000px;}
    #navbg{background-color:#ff3399;width: 100%;height: 37px }
    #navbg nav{width: 1000px;height:37px;margin: 0 auto}
    #navbg nav a{color: #ffffff;font-size: 14px;font-family: 微软雅黑;width: 160px;height: 37px;
        display: block;float:left;text-decoration: none;text-align: center;line-height: 37px; }
    #navbg nav a:hover{background:#e50065}
    .scrollNav{position: fixed;left: 0;top: 0}//固定导航栏的css样式
</style>
</head>
<body>
<div id="top"><img src="images/20170715125349.png" height="55" width="1000"/></div>
<div id="navbg">
    <nav>
        <a href="#">公司团队</a>
        <a href="#">科技前沿</a>
        <a href="#">业务咨询</a>
        <a href="#">合作伙伴</a>
        <a href="#">加入我们</a>
        <a href="#">关于前端</a>
    </nav>
</div>
<!--由于页面主体部分没有添加具体内容,滚动条显示不出来,在这里使用换行使浏览器显示滚动条--> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

2、JS实现悬浮导航

代码如下:(直接将JS代码插入到HTML页面中即可实现所述效果)

<script language="JavaScript" src="JQuery/jquery-3.2.1.js"></script>//调用JQuery框架
<script type="text/javascript">
$(document).ready(function () {
    var topH=$("#top").height();//获取头部高度,top指导航栏上面的部分
    var navbg=$("#navbg");//获取导航栏对象
    $(window).scroll(function () {
        if($(window).scrollTop()>topH){//对比滚动的距离与导航栏上面部分的高度大小来动态添加css样式
            navbg.addClass("scrollNav")//对导航栏添加样式
        }else{
            navbg.removeClass("scrollNav")//去掉导航栏添加的样式
        }
    });
});
</script>

源码:JS实现悬浮导航制作.zip

备注:

  文章为本人原创  转载请注明出处  文章难免会有纰漏之处  还望大家多多包含  如有意见或者建议可与本人联系  本人QQ:2187093468(非诚请勿扰,加好友请备注在哪里看到的)

 

 

JS实现悬浮导航的制作(附源码)--web前端

标签:class   addclass   type   img   position   css   com   play   团队   

原文地址:http://www.cnblogs.com/qikeyishu/p/7183249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!