简单实现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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
JS实现商品筛选功能
Aug 19 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Element PageHeader页头的使用方法
2020/07/26 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
产品发布会策划方案
2014/05/12 职场文书
大学专科自荐信
2014/06/17 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
总账会计岗位职责
2015/04/02 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
python中使用redis用法详解
2022/12/24 Redis