简单实现js悬浮导航效果


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js悬浮导航的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title>悬浮导航</title>
 <style>
  * {
   margin: 0px;
   padding: 0px;
  }
  ul li{
   list-style: none;
  }
  body{
   height: 2000px;
  }
  #top{
   height: 300px;
   width: 100%;
   background-color: red;
  }
  #nav{
   height: 50px;
   line-height: 50px;
   width: 100%;
   background-color: pink; 
  }
  #nav ul{
   width: 1200px;
   margin: 0 auto;
  }
  #nav ul li{
   float: left;
   width: 164px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div id="top">
  顶部
 </div>
 <div id="nav">
  <ul>
   <li>首页</li>
   <li>首页</li>
   <li>首页</li>
   <li>首页</li>
   <li>首页</li>
   <li>首页</li>
   <li>首页</li>
  </ul>
 </div>
</body>
<script>
 var ad = document.getElementById("nav")
 window.onscroll = function(){
  var _top = document.body.scrollTop || document.documentElement.scrollTop;//兼容
  if(_top>=300){
   ad.style.position = "fixed";
   ad.style.top = 0 +"px";
  }else{
   ad.style.position = "absolute";
   ad.style.top = 300+"px";
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP count()函数讲解
2019/02/03 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python中pygame模块用法实例
2014/10/09 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
一套.net面试题及答案
2016/11/02 面试题
财务会计人员求职的自我评价
2014/01/13 职场文书
节约用水的口号
2014/06/20 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
毕业生工作求职信
2014/06/30 职场文书
国际贸易实训报告
2014/11/05 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
数据库连接池
2021/04/06 MySQL