固定导航栏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 ...
随机推荐
- CF 304B——Calendar——————【年月日计算】
B - Calendar Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- [转]微信小程序开发（二）图片上传+服务端接收
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
- 使用mermain用Markdown的语法画流程图和UML图
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.
- 安装 VS 2015 Update 2 + Windows SDK Tools 1.3.1 + Windows SDK 10586.212 后提示找不到 10586.0 SDK 问题的解决方法
将 Visual Studio 2015 升级到 Update 2,并安装 Windows SDK Tools 1.3.1 和 Windows SDK 10586.212 后,有可能造成原本已安装的 ...
- C# url获取图片流转字符串
//http url获取图片流转字符串 //string url = serverUrl.TrimEnd('/') + PUrl; //WebRequest request = WebRequest. ...
- 在windows上用netsh动态配置端口转发
使用多个虚拟机,将开发环境和工作沟通环境分开(即时通,办公系统都只能在windows下使用…),将开发环境的服务提供给外部访问时,需要在主机上通过代理配置数据转发. VirtualBox提供了端口转发 ...
- Scarpy框架持久化存储
一.介绍 持久化存储操作分为两类:磁盘文件和数据库. 而磁盘文件存储方式又分为:基于终端指令和基于管道 二.基于终端指令的持久化存储 Scrapy是通过 scrapy 命令行工具进行控制的. 这里我们 ...
- 纯css 简单网页
<div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...
- Avro-RPC client in Flume
Avro used in Flume Define the interface of RpcClient public interface RpcClient { public int getBatc ...
- jar命令使用介绍
http://docs.oracle.com/javase/7/docs/technotes/tools/solaris/jar.html Skip to Content Oracle Technol ...