停留在网页顶部随着滚动条移动而不动JQUERY代码

最新推荐文章于 2020-05-22 17:54:12 发布

cui_angel

最新推荐文章于 2020-05-22 17:54:12 发布

阅读量5.4k

点赞数

分类专栏： JavaScript JQuery Web 文章标签： jquery function xhtml border float html

Web 同时被 3 个专栏收录

109 篇文章 1 订阅

订阅专栏

JavaScript

101 篇文章 1 订阅

订阅专栏

JQuery

41 篇文章 0 订阅

订阅专栏

要讲解里面的原因，请留言。

<!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 type="text/javascript" src="jqury/js/jquery.js" ></script>
<script type="text/javascript">
$(function(){
   $("#wrap ul li ").css("width",760 / $("#wrap ul li").size());
   $(window).scroll(function(){
    var h = $(this).scrollTop()+2;
    $("#wrap").css("top",h);
   });
   $("#wrap ul li:even").css("background","#ddd")
   $("#wrap ul li").hover(function(){$(this).css("background","#0f0");},function(){$(this).css("background","");});
});
</script>
<style type="text/css">
#wrap{position:absolute; top:2px; left:0px; width:100%; height:20px; background:#f00;}
#wrap ul{list-style:none; width:760px; margin:0 auto; padding:0; background:#fff;}
#wrap ul li{float: left; text-align:center;}
#test{height:2000px; background:#f0f; margin:0; padding:0; border:1px solid black;}
</style>
</head>

<body>
<div id="wrap">
<ul><Li>首页</Li><li>图片</li><li>新闻</li><li>软件</li><li>图片</li><li>新闻</li><li>软件</li><li>图片</li><li>新闻</li><li>软件</li></ul>
</div><div id="test"></div>
</body>
</html>