博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 导航固定的一个实例
阅读量:4521 次
发布时间:2019-06-08

本文共 1235 字,大约阅读时间需要 4 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="/ajaxjs/jquery1.3.2.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){ 
  $(window).scroll(function() {
  //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
  if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
  }else{
    $(".nav").removeClass("fixedNav");
  }
  });//www.111cn.net
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微软雅黑", "黑体";
  font-size:30px;
}

div.fixedNav{

  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body>  
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

更多详细内容请查看:

转载于:https://www.cnblogs.com/alibai/p/3548974.html

你可能感兴趣的文章
Java Spring学习笔记03.@component
查看>>
(十)桥接模式-代码实现
查看>>
Windows Phone开发(29):隔离存储C 转:http://blog.csdn.net/tcjiaan/article/details/7447469...
查看>>
循环单链表操作
查看>>
iOS --- Touch ID指纹解锁
查看>>
强制命令-hdfs 主备间切换
查看>>
echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据...
查看>>
Spring事务
查看>>
修改Arduino串口缓冲区大小(转)
查看>>
深入解读键值产生原理,linux中的软链接和硬链接(转)
查看>>
CodeForces 591A
查看>>
super 、static、final关键字加深记忆哦!还有父子类构造函数调用问题
查看>>
JDBC之java数据库的连接与简单的sql语句执行
查看>>
图形验证码如何美化?
查看>>
「题解」:[组合数学][DP]:地精部落
查看>>
两个input之间有空隙,处理方法
查看>>
让你秒懂什么是 SEM、EDM、CPS、CPA、ROI、SEO……
查看>>
nginx connect failed (110- Connection timed out) 问题排查
查看>>
python中set使用
查看>>
十六进制转十进制
查看>>