JQuery实现仿腾讯的固定导航栏
1、描述
窗口滚动一定高度之后才让导航栏固定
2、要点
浏览器滚动的事件:$(window).scroll(functiuon(){
文档滚过的高度: $(doucment).scrollTop();
});
3、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.content{
width:1001px;
margin: 0 auto;
}
.f{
position:fixed;
top:0;
left:0;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var topHeight=$(".top").height();
console.log(topHeight);
//窗口滚动事件
$(window).scroll(function(){
if($(document).scrollTop()>=topHeight){
//css定位
$(".nav").addClass("f");
$(".content").css("margin-top",$(".nav").height());
}else {
$(".nav").removeClass("f");
$(".content").css("margin-top",0);
}
});
});
</script>
</head>
<body>
<div class="top">
<img src="img/top.png" />
</div>
<div class="nav">
<img src="img/nav.png"/>
</div>
<div class="content">
<img src="img/main.png"/>
</div>
</body>
</html>
JQuery实现仿腾讯的固定导航栏的更多相关文章
- Jquery实现仿腾讯微薄的广播发表
前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...
- 固定导航栏(jquery)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- JS---封装getScroll函数 & 案例:固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- iOS开发-仿大众点评iPad侧边导航栏
昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...
- 简单仿京东"筛选"界面 双导航栏控制器共存 by Nicky.Tsui
大概就是这么一个效果 如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图 那么我们可以通过加一个view到导航栏控制器的view里面来实现 //该view作为全局变 ...
- 仿知乎/途家导航栏渐变文字动画效果-b
demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...
- 固定导航栏demo
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
随机推荐
- perl中调用cgi
来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698856.html 参考:http://www.willmaster.com/librar ...
- Linq skip skipwhile take takewhile
一.Skip()跳过 static void Main(string[] args) { //skip()跳过 ,,,,,,,,,}; //跳过3条 nums.Skip().ToList().ForE ...
- 相对路径json无法获取
在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...
- HDU 1540<线段树,区间并>
题目连接 参考 题意: 维护各个点的连续的最大连续长度. 思路: 主要是维护一个区间的三个变量ll,f[i].l为起点向右的最大连续 长度,rl:f[i].r为起点向左的最大连续长度,ml:[l,r] ...
- ALAssetsLibrary 照片相关 浅析
ALAssetsLibrary 提供了访问iOS设备下”照片”应用下所有照片和视频的接口: 从 ALAssetsLibrary 中可读取所有的相册数据,即 ALAssetsGroup 对象列表: 从每 ...
- HDU2199,HDU2899,HDU1969,HDU2141--(简单二分)
二分是一种很有效的减少时间开销的策略, 我觉得单列出二分专题有些不太合理, 二分应该作为一中优化方法来考虑 这几道题都是简单的使用了二分方法优化, 二分虽然看似很简单, 但一不注意就会犯错. 在写二分 ...
- hdu Eddy's picture (最小生成树)
Eddy's picture Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tota ...
- [原]界面上有几个球队名字的列表,将鼠标放到球队名字上就变为红色背景,其他球队背景颜色为白色,点击一个球队的时候就将点击的球队变为fontSize=30字体(fontSize=‘’回到默认)。
window.onload = function () { var uls = document.getElementById('ui').getElementsByTagNa ...
- 2333: [SCOI2011]棘手的操作[写不出来]
2333: [SCOI2011]棘手的操作 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1979 Solved: 772[Submit][Stat ...
- “inno setup打包,win7下安装没有桌面快捷方式,xp下安装正常”
修改桌面的快捷键为选中就行了:Flags: checkablealone;在[Tasks]下面修改代码如下:Name: "desktopicon"; Description: &q ...