jquery置顶栏

chen'mo

2013-08-24 / 0 评论 / 2,043 阅读 / 正在检测是否收录...

08/24

温馨提示：

本文最后更新于1970年01月01日，已超过20044天没有更新，若内容或图片失效，请留言反馈。

又找到了这个小功能。还有footer固定的

<html>
    <head>
    	<script src="jquery-1.9.1.min.js"></script>
	</head>

    <body>
    	<script>
    $.fn.smartFloat = function() {
	    var position = function(element) {
	        var top = element.position().top, pos = element.css("position");
	        $(window).scroll(function() {
	            var scrolls = $(this).scrollTop();
	            if (scrolls > top) {
	                if (window.XMLHttpRequest) {
	                    element.css({
	                        position: "fixed",
	                        top: 0
	                    });    
	                } else {
	                    element.css({
	                        top: scrolls
	                    });    
	                }
	            }else {
	                element.css({
	                    position: "absolute",
	                    top: top
	                });    
	            }
	        });
	    };
    	return $(this).each(function() {
        	position($(this));                         
    	});
	};
    	</script>
    <script>
    $(function(){	
	$(".caseMenu").smartFloat();	  
	})
    </script>
    <style>
    html,body{margin:0px; height:0px;}
    .caseMenu{background: #000; width:100%; color:#fff; text-align: center; height:45px; line-height: 45px; font-family: microsoft yahei; letter-spacing: 2px; font-size: 18px; position:fixed;top: 0}
    p{height:400px;}
    .main div{width:100%; height:300px;}
    </style>
    <div class="caseMenu">置顶栏</div>
    <div class="main">
    	<div style="background:#5EEAFF"></div>
    	<div style="background:#FF985E"></div>
    	<div style="background:#FF5EEC"></div>
    	<div style="background:#FFDD5E"></div>
    	<div style="background:#FAFFE3"></div>
    	<div style="background:#E7ECE7"></div>
    	<div style="background:#C7CCA9"></div>
    	<div style="background:#FAC5CC"></div>
    	<div style="background:#F88795"></div>
    	<div style="background:#6E526A"></div>
    </div>
    </body>
</html>