JQuery实现仿腾讯的固定导航栏
2024-10-19 03:32:45
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>
最新文章
- Github 新的项目管理模式——Projects
- IIS+PHP+MYSQL安装配置
- [Firefly引擎][学习笔记一][已完结]带用户验证的聊天室
- 24种设计模式--原型模式【Prototype Pattern】
- javascript 笔记(1)
- Solr导入数据库数据
- 不要再坑人啦!NSOperation才是苹果推荐使用的多线程技术!
- AppDelegate关于应用程序挂起、复原与终止的代理方法
- SpringCloud-sleuth-zipkin链路追踪
- Spark-RPC理解
- 给大家推荐一个C#下文件监听器和资源管理器的示例Demo-含源码
- 《温故而知新》JAVA基础五
- Extension-valuepart
- 《LINQ技术详解C#》-5.非延迟操作符
- Python逻辑运算
- 基于无锁队列和c++11的高性能线程池
- 基础回顾之List集合
- python 三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数
- 《MySQL技术内幕:InnoDB存储引擎(第2版)》书摘
- 向IOS模拟机上添加图片