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

    一.从列表中获取元素 *跟数组一样,我们可以通过元素的索引值(index)从列表获取单个元素,注意,列表索引值是从0开始的 >>> member= ['尘封','冰点','无名',' ...

  2. 旅行商问题【山财新生赛E】

    链接:https://ac.nowcoder.com/acm/contest/547/E 来源:牛客网 题目描述 旅行商来到了一个新的国家,这个国家有N个城市,他们直接由N-1条道路相连接,每条道路的 ...

  3. Miller_Rabin整理笔记

    目录 问题 别的 正事 代码 问题 一个数到底是不是素数 别的 首先列一下我们可以求素数的东西 根号暴力求 \(O(nloglogn)\)的埃氏筛 \(O(n)\)的欧拉筛 还有我们要学习的Mille ...

  4. （转）tomcat架构&session共享

    (二期)16.tomcat的整体架构与session共享方案 [课程16]tomcat...共享.xmind47.6KB [课程16]tomcat...流程.xmind0.6MB [课程16]tomc ...

  5. How can I move a MySQL database from one server to another?

    My favorite way is to pipe a sqldump command to a sql command. You can do all databases or a specifi ...

  6. IE8下面parseInt('08')、parseInt('09')会转成0

    例子: <html> <body> <script type="text/javascript"> for(var i=1;i<=20;i ...

  7. 使用BeautifulSoup 爬取一个页面上的所有的超链接

    # !/usr/bin/python # -*-coding:utf-8-*- import urllib from bs4 import BeautifulSoup response = urlli ...

  8. 【C#】异步的用法

    1. C#5.0 加入了async, await关键字. async是在声明异步方法时使用的修饰符, 声明放在返回值之前即可,await表达式则负责消费异步操作, 不能出现在catch或finally ...

  9. 软件开发架构、网络基础知识、osi七层模型

    一.软件开发的架构 涉及到两个程序之间通讯的应用大致可以分为两种: 第一种是应用类:qq.微信.网盘.优酷这一类是属于需要安装的桌面应用 第二种是web类:比如百度.知乎.博客园等使用浏览器访问就可以 ...

  10. Gym 101617J Treasure Map（bfs暴力）

    http://codeforces.com/gym/101617/attachments 题意:给出一个图,每个顶点代表一个金矿,每个金矿有g和d两个值,g代表金矿初始的金子量,d是该金矿每天的金子量 ...