首页 jquery置顶栏

jquery置顶栏

chenmo 2013-8-24 0 2203
又找到了这个小功能。还有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>

#jQuery##置顶栏#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: chenmo 本文最后编辑于2013-8-24 05:05:26
chenmo

一个爱玩电脑,却又不沉迷游戏;喜欢网页设计,却又能力不足。喜欢网上到处灌,关注科技类新闻,寻搜有价值的网站。喜欢美剧,又喜爱电影,可以很宅,很宅,却又爱好户外骑行运动,喜欢接近大自然的心声。

作者的微博

发表评论: