固定导航栏demo
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
img{
vertical-align: top;
}
.main{
margin:0 auto;
width:1000px;
margin-top:10px; }
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="top">
<img src="data:images/top.png" alt=""/>
</div>
<div class="nav" id="Q-nav">
<img src="data:images/nav.png" alt=""/>
</div>
<div class="main">
<img src="data:images/main.png" alt=""/>
</div>
</body>
</html>
<script src="my.js" type="text/javascript"></script>
<script>
var nav = $("Q-nav");
var navTop = nav.offsetTop; // 得到导航栏距离顶部的距离 168
console.log(navTop);
window.onscroll = function() {
// console.log(nav.offsetTop);
if(scroll().top >= navTop)
{
// alert("到位置了");
nav.className = "nav fixed";
}
else
{
nav.className = "nav";
}
}
</script>
my.js为自己封装的小插件
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他浏览器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 声明的了 DTD
// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
固定导航栏demo的更多相关文章
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- JS---封装getScroll函数 & 案例：固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- 固定导航栏（jquery）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 一个可以拓展的垂直多级导航栏 Demo
大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: <!DOCTYPE ...
- JQuery实现仿腾讯的固定导航栏
1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...
- js实现用按钮控制网页滚动、以及固定导航栏效果
实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...
- 1+X学习日志——导航栏demo
初级菜鸟的作品,各位大佬见笑了 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 淘宝分类导航条；纯css实现固定导航栏
效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
随机推荐
- C#中的MD5加密
1 using System.Web.Security; 2 string pswd = FormsAuthentication.HashPasswordForStoringInConfigFile ...
- FreeSwitch无法启动，提示进程pid锁定的解决方法
来源:https://stackoverflow.com/questions/12817232/how-do-i-call-a-local-softphone-on-freeswitch error ...
- 实用的随机数生成类Random：测试（随机产生100个不重复的正整数）
实用的随机数生成类Random:测试(使用Random类随机生成100个不重复的正整数) 一.之前我们使用随机数用的是Math类的random()方法: tips: 产生随机数(0~9中任意整数)的方 ...
- CentOS-7 本地yum源挂载
在Linux无法连接到互联网时,手动安装依赖是及其麻烦的一件事,需要花费大量的时间寻找rpm包.但在配置本地yum源后,绝决依赖问题就会变得非常简单. 一.准备 centos-7.ISO镜像文件: 二 ...
- 前端之CSS——CSS选择器
一.CSS介绍 为什么需要CSS(CSS的作用)? 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改 ...
- Zygote和System进程的启动过程
##init脚本的启动 +------------+ +-------+ +-----------+ |Linux Kernel+--> |init.rc+-> |app_process| ...
- 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色
简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在 ...
- MapReduce框架结构及代码示例
一个完整的 mapreduce 程序在分布式运行时有三类实例进程: 1.MRAppMaster:负责整个程序的过程调度及状态协调 2.MapTask:负责 map 阶段的整个数据处理流程 3.Redu ...
- HTML <meta> Attribute
HTML <meta> Attribute http-equiv 定义和用法 The http-equiv attribute provides an HTTP header for th ...
- centos开启IPV6配置方法
目前国内大部分服务器和PC不支持IPV6地址的,但是服务器上本身是可以正常开启IPV6服务,有部分程序在服务器上运行的时候,需要服务器能监听一个ipv6地址才行,因此本文档指导如何在centos服务器 ...