后退 刷新 前进 收藏 顶部 |   知道 黑匣子 富媒体 技术服务

【原创】jquery-1.4.2 实现元素下拉时固定浮动于顶部代码

程序猿 JS分享 ... (shuke.2013-08-19 09:43)
见到好东西就就相自己变通一下
<!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-1.4.2 实现元素下拉时固定浮动于顶部代码 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="shuke">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <STYLE TYPE="text/css">
	.sknav{position:fixed; top:0; width:100%;z-index:100000;margin:0}
  </STYLE>
 </HEAD>

 <BODY>
 <DIV style="width:800px;overfloa:hidden;">
 asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br> 
  <DIV id="sknav" style=" background:gray;color:white;font-size:14px;height:100px">这个层不会看不到</DIV>
  asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc 
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc
<br>asdfasdfasdaaaaaaaaaaaadcccccccccccccccccccccccccccccccccccccccccccccccc</DIV>
<script src="http://www.csdn.net/js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    
    $(function () {//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(window).scroll(function(){
            if ($(window).scrollTop()>100){
               
				$("#sknav").addClass("sknav");
            }
            else
            {
              
				$("#sknav").removeClass("sknav");
            }
        });
    });
});
 </script> 

 </BODY>
</HTML>


2 楼 shuke[2013-08-19 11:02]
看我的左面,就是以上代码改成功的,不过放到了左边。
CSS代码
.sknav{ position:fixed; left:5px; width:100px;  top:5px; z-index:100000;margin:0 auto; background:white;}
3 楼 shuke[2013-09-12 10:56]
jQuery is undefined 问题也很搞笑,jquery.min.js建议放在js引用的第一个。免得报错
进度:100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

图片新热点

导航


目录


    站内搜索
    首页 | W3C | ME