通过jQuery来实现页脚永远固定在页面底部的效果
2012-07-25 13:35
731 查看
HTML:
CSS:
特别注意在html,body中不可以设置高度height为100%,否则此方法无法正常运行,如果你在div#footer中设置了一个高度并把宽度设置为100%将更是万无一失了。
JQuery:
注意:会产生闪动,类似动画效果
<div id="header">Header Section</div> <div id="page" class="clearfix"> <div id="left">Left sidebar</div> <div id="content">Main Content</div> <div id="right">Right Content</div> </div> <div id="footer">Footer Section</div>
CSS:
*{margin: 0;padding:0;} .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; /* IE <8 */ } #footer{ height: 60px; background: #fc6; width: 100%; } /*==========其他div==========*/ #header { padding: 10px; background: lime; } #left { width: 18%; float: left; margin-right: 2%; background: orange; } #content{ width: 60%; float: left; margin-right: 2%; background: green; } #right { width: 18%; float: left; background: yellow; }
特别注意在html,body中不可以设置高度height为100%,否则此方法无法正常运行,如果你在div#footer中设置了一个高度并把宽度设置为100%将更是万无一失了。
JQuery:
<script type="text/javascript"> // Window load event used just in case window height is dependant upon images $(window).bind("load", function() { var footerHeight = 0, footerTop = 0, $footer = $("#footer"); positionFooter(); //定义positionFooter function function positionFooter() { //取到div#footer高度 footerHeight = $footer.height(); //div#footer离屏幕顶部的距离 footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; /* DEBUGGING STUFF console.log("Document height: ", $(document.body).height()); console.log("Window height: ", $(window).height()); console.log("Window scroll: ", $(window).scrollTop()); console.log("Footer height: ", footerHeight); console.log("Footer top: ", footerTop); console.log("-----------") */ //如果页面内容高度小于屏幕高度,div#footer将绝对定位到屏幕底部,否则div#footer保留它的正常静态定位 if ( ($(document.body).height()+footerHeight) < $(window).height()) { $footer.css({ position: "absolute" }).stop().animate({ top: footerTop }); } else { $footer.css({ position: "static" }); } } $(window).scroll(positionFooter).resize(positionFooter); }); </script>
注意:会产生闪动,类似动画效果
相关文章推荐
- 通过jQuery来实现页脚永远固定在页面底部的效果
- 表格的头部固定效果通过css及jquery分别实现
- JS实现让页脚一直固定在页面底部
- 关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)
- 让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- JS实现让页脚一直固定在页面底部
- 通过jquery实现页面的动画效果
- 如何将页脚固定在页面底部(多种方法实现)
- 通过jquery实现页面的动画效果(实例代码)
- 如何将页脚固定在页面底部(多种方法实现)
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- jQuery实现弹窗下底部页面禁止滑动效果
- 有了html页面,进行二次显示,通过html、JavaScript、jQuery的ajax三种技术,我可以实现任何界面效果
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
- 使用jquery实现页面滚动到底部自动加载新的信息
- JQuery页面随滚动条动态加载效果的简单实现(推荐)
- CSS控制DIV永远固定在页面底部
- jquery实现当滑动到一定位置时固定效果