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

发表评论

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

评论

9条评论
  1. avatar

    木子 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows Windows 回复

    “老婆!咱们吹灯就寝吧。”
    “这话你已经说三遍了,你个傻B!对着日光灯吹了半天!”

    广东省深圳市 电信

    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
            顺序播放