思想：导航在这里只有两种状态，一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过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. ListView与SimpleAdapter（三）

    一般用于只有两个控件的列表. 使用SimpleAdapter 的数据是以List<Map<String,?>>形式封装数据, List的每一节对应ListView的每一行. H ...

  2. Python3 tkinter基础 Canvas create_line 画实线与虚线

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

  3. 什么是pear的channel?

    从pear看程序的组成: 可执行命令文件: /usr/bin/pear, pearcmd peardev等; 实现功能的库,函数等文件: /var/lib/pear 等... 程序的资源目录, 主要是 ...

  4. bzoj 1251: 序列终结者 平衡树，fhqtreap

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1251 思路 好简单的模板题 不过还是wrong了好几发 叶子节点要注意下,不能使用 遇到就不 ...

  5. html 之 body topmargin、leftmargin、rightmargin、bottomnargin

    基本语法 <body topmargin=value leftmargin=value rightmargin=value bottomnargin=value> 语法说明 通过设置top ...

  6. AtCoder Beginner Contest 120 解题报告

    为啥最近都没有arc啊... A - Favorite Sound #include <algorithm> #include <iostream> #include < ...

  7. Oracle 基础学习笔记

    知识点 一.登陆数据库: 登陆数据库: sqlplus system/oracle123456 二.新建用户.授权(连接数据库.创建表.表空间.查询某用户下的表) 语法: create user [用 ...

  8. Docker run 出现问题如何调试？

    docker run -ti 3f5dd697cc83 /bin/bash #进入image的目录 ls -l #列出所有目录 dotnet run WestWin.Ads.Crawler.WebAp ...

  9. mysql中between...and..的使用，及时间范围的查询

    博主原创,转载注明出处: 在mysql应用中,以范围进行查询的很多是以时间范围作为条件进行范围查询的,时间范围查询有 很多种写法,首先总结一下between....and...的使用方法: <s ...

  10. 解析Django路由层URLconf

    目录: 一  Django中路由的作用 二  路由的分组 三  路由分发 四  反向解析 五  名称空间 六  Django2.0版的path 一.Django中路由的作用 URL配置(URLconf ...