思想：导航在这里只有两种状态，一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过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. 【Python52--爬虫1】

    一.Python如何访问互联网 采用urllib包来访问 二.理论 1.请问URL是“统一资源标识符”还是“统一资源定位符” URI是统一资源标识符,URL是统一资源定位符.即:URI是用字符串表示某 ...

  2. RabbitMQ 入门指南——初步使用

    MQ的消息持久化 https://www.rabbitmq.com/tutorials/tutorial-two-java.html When RabbitMQ quits or crashes it ...

  3. linux内核中侧async_tx是什么?

    答: 异步内存传输api(asynchronous memory transfer/transform API),这是一种api,用来为应用提供操作DMA的API. 下图是async_tx在架构中所处 ...

  4. POJ - 1287 Networking 【最小生成树Kruskal】

    Networking Description You are assigned to design network connections between certain points in a wi ...

  5. resure挽救笔记本系统和一些相关的操作记录

    使用fedora23很久了, 但是感觉不是很流畅, 出现了一些不太稳定的体验, 所以想改到centos7. 因为centos7的很多东西 跟 fedora23 很相近了. 所以应该是无缝过渡 是选择3 ...

  6. 从0开始安装fedora23的笔记-- 以及使用fedora的常规问题-3

    关于sys的目录有: /etc/sys/, 和 /proc/sys fedora的桌面背景图片默认的在: /usr/share/backgrounds/, 里面有f23, gnome, images等 ...

  7. sql server查看用户权限

    System.ServiceModel.FaultException: Server error. Detail: The EXECUTE permission was denied on the o ...

  8. HIHOcoder 1449 后缀自动机三·重复旋律6

    思路 显然endpos的大小就对应了对应子串的出现次数,所以快速求出endpos的大小,然后用它更新对应子串长度(minlen[i]~maxlen[i])的答案即可 endpos的大小可以拓扑排序求出 ...

  9. 使用 node 创建代码服务器

    var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); ...

  10. Linux安装python3.7

    1.下载与解压 先到python官网: https://www.python.org/downloads/release/python-371/](https://www.python.org/dow ...