jQuery实现的导航固定效果,非常实用的效果,留着备用

  • 内容
  • 相关

演示代码:

<!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>jQuery实现的导航固定效果</title>
<script src="/images/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");
	} 
  });
});
</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;">
</body>
</html>


以下是jqurey 代码

jquery1.3.2.js

本文标签:

版权声明:若无特殊注明,本文皆为《鬼少》原创,转载请保留文章出处。

本文链接:jQuery实现的导航固定效果,非常实用的效果,留着备用 - http://tv1314.com/post-35.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

8条评论
  1. avatar

    南京代开发票 Lv.1 Chrome 45.0.2454.101 Chrome 45.0.2454.101 Windows 7 Windows 7 回复

    建筑是建筑物与构筑物的总称,是人们为了满足社会生活需要,
    利用所掌握的物质技术手段,并运用一定的科学规律、风水理念和美学法则创造的人工环境。
    www.behance.net/jnkfp889
    www.behance.net/sjz315
    www.behance.net/dkfpcq
    www.behance.net/dkbjfp010
    www.behance.net/km030
    www.behance.net/njdkfp408
    www.behance.net/szdkfp
    www.behance.net/hzdkfp
    www.behance.net/sjzdkfp023
    www.behance.net/ccfp408
    www.tagged.com/zzkfp147
    www.tagged.com/dkfpwx
    www.tagged.com/aqdkfp
    www.tagged.com/dlfp604
    http://sjzkfpz.weebly.com
    http://fzdkfpw.weebly.com
    http://cskfpz.weebly.com
    http://issuu.com/jingjinglinlin
    http://issuu.com/dkfpfz
    http://issuu.com/cqdkfpw
    http://issuu.com/jndkfpw
    http://issuu.com/jiakld
    http://issuu.com/najisk
    http://issuu.com/hfdkfpw
    http://issuu.com/tjdkfpw
    http://issuu.com/bjdkfpw

    广东省广州市 电信

    1. avatar

      web前端 Lv.2 Firefox 17.0 Firefox 17.0 GNU/Linux x64 GNU/Linux x64 回复

      引用jq那段表示木有看懂

      北京市 电信

      1. avatar

        web前端 Lv.2 Firefox 17.0 Firefox 17.0 GNU/Linux x64 GNU/Linux x64 回复

        留着备用

        北京市 电信

        1. avatar

          最强美少女 Lv.1 Firefox 29.0 Firefox 29.0 Windows 7 Windows 7 回复

          [印迹]

          湖北省随州市 移动

          00:00 / 00:00
          顺序播放