固定导航栏(jquery)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>固定导航栏</title>
<script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<style>
*{ padding:0px; margin:0px;}
.big{ width:100%;height:4000px; background:pink; margin:0 auto; overflow:hidden;}
.sub{ width:100%;height:100px; background:yellow; }
.fixed{ width:100%; height:80px; background:#F66; text-align:center; top:0px;}
</style>
</head>
<body>
<div class="big">
<div class="sub">
图片区
</div>
<div class="fixed">我是固定的哟</div>
我是最大的div
</div>
</body>
</html>
<script>
$(document).ready(function(e) {
t = $('.fixed').offset().top;//获取匹配元素在当前视口的相对偏移 .offset().top:获得位移高度
mh = $('.big').height();
fh = $('.fixed').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 10){
$('.fixed').css('position','fixed');
if(s + fh > mh){
$('.fixed').css('top',mh-s-fh+'px');
}
}else{
$('.fixed').css('position','');
}
})
});
</script>
固定导航栏(jquery)的更多相关文章
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- JS---封装getScroll函数 & 案例:固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- JQuery实现仿腾讯的固定导航栏
1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...
- 固定导航栏demo
代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- js实现用按钮控制网页滚动、以及固定导航栏效果
实现效果如下: 页面内有三个按钮,分别控制页面向上.向下移动,以及暂停,并设置有导航栏,在滚动到某一位置时显示.且当用户主动控制鼠标滑轮时,滚动效果自动关闭.本页面只是演示如何实现,进行了简单的布局, ...
- 纯CSS实现nav导航栏+jQuery实现article区DIV切换
效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...
- 淘宝分类导航条;纯css实现固定导航栏
效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
随机推荐
- 【Luogu4191】[CTSC2010] 性能优化
题目链接 题意简述 求循环卷积意义下的 \(A(x)*B(x)^C\). 模数为 n+1 ,长度为 n. Sol 板子题. 循环卷积可直接把点值快速幂来解决. 所以问题就是要快速 \(DFT\),由于 ...
- js解决手机键盘影响定位的问题
// 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...
- Internet History, Technology, and Security(week9)——Web Security
Secure Web Connections: Security Public/Private Key - Secure Sockets 凯撒密码容易被破解,后来人们发明了公钥和私钥,由于私钥一定是要 ...
- Mybatis,模糊查询语句,以及传参数的正确写法
不多说直接上代码! 接口: public interface CommodityMapper { int deleteByPrimaryKey(Integer productId); int inse ...
- 双边滤波Matlab代码
%简单地说: %A为给定图像,归一化到[,]的矩阵 %W为双边滤波器(核)的边长/ %定义域方差σd记为SIGMA(),值域方差σr记为SIGMA() %%%%%%%%%%%%%%%%%%%%%%%% ...
- wowza 降低延迟
转自:http://www.ttstream.com/wowza/live/howToAchieveTheLowestLatencyFromCaptureToPlayback 这篇文章介绍了在用R ...
- Linux内核调试方法总结之ptrace
ptrace [用途] 进程跟踪器,类似于gdb watch的调试方法 [原理][详细说明参考man ptrace帮助文档] ptrace系统调用主要是父进程用来观察和控制子进程的执行过程.检查并替换 ...
- ORACLE DG 库参数db_file_name_convert和log_file_name_convert的作用
https://www.cnblogs.com/xqzt/p/5089826.html ORACLE DG 库参数db_file_name_convert和log_file_name_convert的 ...
- 非web工程,打jar放shell执行
作为6年经验的程序员,一直在搞web服务应用开发,今天领导被吐槽了,只会web方面的东东,最基本的打包啥啥都不会.. 一般开发工程都是web项目,突然要求开发非web,不用tomcat装(浪费端口号) ...
- 004-windows(64位)下使用curl命令
一.下载工具包:http://curl.haxx.se/download.html 二.使用 使用方式一:在curl.exe目录中使用 解压下载后的压缩文件,通过cmd命令进入到curl.exe所在的 ...