固定导航栏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 ...
随机推荐
- The Definitive C++ Book Guide and List--reference
http://stackoverflow.com/questions/388242/the-definitive-c-book-guide-and-list Reference Style - All ...
- nyoj 220——推桌子——————【贪心】
推桌子 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 The famous ACM (Advanced Computer Maker) Company has re ...
- 对C++ Local的经典分析(转)
对C++ Local的经典分析 本贴转载自:再别流年的技术实验室 文章地址: http://kittsoft.xp3.biz/?p=86 “这个问题比你想象中复杂”(我也学下BS的风格,虽然这句话是我 ...
- js Base64与字符串互转
1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...
- git本地分支关联远程分支
问题描述: 从远程master克隆下来以后, 在本地创建wf_dev分支, 此时执行git pull 操作出现图中问题. 这是因为:本地的wf_dev分支还没有和远程的wf_dev进行关联. 执行: ...
- 针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]
其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现 第一步就是增加个播放的图片..要不然没有按钮多难看! <div class="videoDi ...
- [LeetCode]20. Valid Parentheses有效的括号
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- String方法使用示例
import java.lang.String; public class StringMethodDemo1{ /** 熟悉String的常用方法. */ public static void ma ...
- c++sizeof大全
sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着“辛苦我一个,幸福千万人”的伟大思想,我决定将其尽可能详细的总结一下.但当我总结的时候才发现,这个问题既可以简单,又可以 ...
- JS基础学习——作用域
JS基础学习--作用域 什么是作用域 变量的作用域就是变量能被访问到的代码范围,比如在下面的这个js代码中,变量a的作用域就是函数foo,因此在全局作用域内的console.log(a)语句不能访问到 ...