一个兼容所有浏览器的滑动固定导航--值得收藏
来源：互联网 发布：flow水刀软件 编辑：程序博客网 时间：2024/05/17 05:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<style>
*{margin: 0; padding: 0;}
body{ width: 100%; height: 3000px; background: salmon;}
#subNav .wrap{width: 100%;}
li{list-style: none;}
a{text-decoration: none;font-size: 14px;color: white;}
#subNav{width:100%;height:50px;background-color:#000;}
#subNav li{float:left;position:relative}
#subNav a{display:block;width:167px;height:50px;line-height: 50px; text-align:center; margin-left:12px;}
.fixedSubNav{position:fixed;top:0;left:0;z-index:1000}
</style>
</head>
<body>
<div class="pic"><img src="img/advantage2.jpg" width="100%"></div>
<div id="subNav">
<ul class="wrap">
<li><a href="#">京东商城2</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
</ul>
</div>
<script>
$(function(){
$(window).scroll(function(){
var targetTop = $(this).scrollTop();
if (targetTop >= 567){
$("#subNav").addClass("fixedSubNav");
}else{
$("#subNav").removeClass("fixedSubNav");
}
})
})
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<style>
*{margin: 0; padding: 0;}
body{ width: 100%; height: 3000px; background: salmon;}
#subNav .wrap{width: 100%;}
li{list-style: none;}
a{text-decoration: none;font-size: 14px;color: white;}
#subNav{width:100%;height:50px;background-color:#000;}
#subNav li{float:left;position:relative}
#subNav a{display:block;width:167px;height:50px;line-height: 50px; text-align:center; margin-left:12px;}
.fixedSubNav{position:fixed;top:0;left:0;z-index:1000}
</style>
</head>
<body>
<div class="pic"><img src="img/advantage2.jpg" width="100%"></div>
<div id="subNav">
<ul class="wrap">
<li><a href="#">京东商城2</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
</ul>
</div>
<script>
$(function(){
$(window).scroll(function(){
var targetTop = $(this).scrollTop();
if (targetTop >= 567){
$("#subNav").addClass("fixedSubNav");
}else{
$("#subNav").removeClass("fixedSubNav");
}
})
})
</script>
</body>
</html>
阅读全文
0 0
- 一个兼容所有浏览器的滑动固定导航--值得收藏
- 兼容任何浏览器的导航固定
- 纯CSS打造兼容各大浏览器的底部固定悬浮导航
- CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
- 一个值得收藏的popupWindow
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
- 滑动导航栏固定
- 设置兼容所有浏览器的设为首页收藏本站js代码
- 兼容所有浏览器的“设为首页”和“收藏本站”js代码
- 兼容所有浏览器的设为首页收藏本站js代码
- 可兼容所有浏览器的“收藏本站”、“设为首页”js代码
- 设为首页和收藏兼容所有浏览器
- HDU4704 Sum
- 关于Apereo CAS中的几种timeout定义
- 用map解决one to one关系
- USB通讯协议
- CSS 内边距padding ，外边距margin
- 一个兼容所有浏览器的滑动固定导航--值得收藏
- 【学习记录】二分图染色
- Paint绘制文字
- 代码生成器
- 17.Oracle杂记——数据字典dba_ts_quotas
- 转换为不同灰度级图像
- SpringMVC的简介概述、工作原理
- 多线程编程之四：WaitForSingleObject的详细用法
- 18.Oracle杂记——数据字典dba_users
