固定导航栏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 ...
随机推荐
- http状态代码含义收藏
状态代码(也称作错误代码),指为服务器所接收每个请求(网页点击)分配的 3 位数代码.多数有效网页点击都有状态代码 200("正常")."网页未找到"错误会生产 ...
- pL/SQL 创建DBLIKN
某些时候,需要关联不同的数据库进行数据查询.操作等. 在Oracle中,关联不同的数据库进行表关联,就要用到了数据库连接(DB link). 创建DB link有两种方法:通过SQL语句创建,通过可视 ...
- JavaScript的作用域（Scope）和上下文（Context）
JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScrip ...
- C# 获取字符串长度
int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;
- 02.ArrayList和HashTable
ArrayList集合 数组的缺点: (1).数组只能存储相同类型的数据. (2).数组的长度要在定义时确定. 集合的好处: (1).集合可以存储多种不同类型的数据. (2).集合的长度是可以任意改变 ...
- PCA 降维算法详解 以及代码示例
转载地址:http://blog.csdn.net/watkinsong/article/details/38536463 1. 前言 PCA : principal component analys ...
- (四) HTML之表单元素
HTML中的表单元素,是构成动态网页的重要组成部分,因此,熟知表单元素是十分重要的.下面将根据表单中的一些常用标签进行介绍 1.单选按钮 <input type="radio" ...
- H5插入视频兼容主浏览器
插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...
- scale 和 zoom，以及zoom的一些变态用法
zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...
- AngularJS Toaster的简单介绍
github地址: https://github.com/jirikavi/AngularJS-Toaster 参考博客: https://www.cnblogs.com/youzhuxiaoyao/ ...