思想：导航在这里只有两种状态，一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过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="data: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前端的更多相关文章

  1. JS实现悬浮导航的制作--web前端

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

  2. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  3. ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)

    场景 在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页:https: ...

  4. arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)

    因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...

  5. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...

  8. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  9. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. 【python--函数解读】

    1.strip()函数:用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列(包括'\n', '\r',  '\t',  ' ') 注意: 该方法只能删除开头或是结尾的字符,不能删除中间部分的 ...

  2. Base64编码为什么会使数据量变大？

    当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大,为何呢?这里就得先探究一下什么是Base64编码. Base64编码的思想是是采用64个基 ...

  3. Python3 tkinter基础 Listbox Scrollbar 创建垂直滚动条

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. Python3 tkinter基础 Canvas create_rectangle 画矩形

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Restful framework【第五篇】解析器

    基本使用 -解析器 -源码从request.data -全局配置 -'DEFAULT_PARSER_CLASSES':['rest_framework.parsers.JSONParser'], -局 ...

  6. 4514: [Sdoi2016]数字配对 费用流

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4514 思路 EK直接贪心做 <0的时候加上剩余返回 二分图a->b的时候 把b- ...

  7. 后缀字符串|计蒜客2019蓝桥杯省赛 B 组模拟赛（一）

    样例输入: 3 ba a aba 样例输出: 2 3 1 思路一:暴力,只能过50%数据,枚举每一个字符串,内层枚举其他字符串判断是否以这个字符串为后缀 思路二:哈希表,存储每一个后缀的数目,stri ...

  8. 【Dalston】【第六章】API服务网关(Zuul) 下

    Zuul给我们的第一印象通常是这样:它包含了对请求的路由和过滤两个功能,其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础.过滤器功能则负责对请求的处理过程进行干预,是实 ...

  9. SQL 检查 Varchar 是否能转换为 NUMERIC

    https://bbs.csdn.net/topics/390480323 ISNUMERIC(size_long)=1 (IIF( ISNUMERIC(size_long)=1 AND ISNUME ...

  10. Hyper-v虚拟机

    Hyper-V1:创建和管理虚拟机 Hyper-V2:向VM增加虚拟硬盘 Hyper-V3:虚拟机的配置 使用Hyper-V创建虚拟机 Hyper-v 安装CentOS 7 (其他虚拟机一样参考)