参考:
https://css-tricks.com/snippets/jquery/jquery-sticky-footer/
HTML:
<div id="footer">
Sticky Footer
</div>
CSS:
#footer { height: 100px; }
JS:
// 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();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
DEMO:
https://css-tricks.com/examples/jQueryStickyFooter/
分享到:
相关推荐
使用html+css来实现传统的页面布局中footer固定在底部
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部...
footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!
footer在内容少的时候屏幕底部内容多在内容底部
magento footer no cache,不缓存页面底部footer部分
android Fragment实现底部footer Tab
footer为公用组件,其他页面都需要引入。接下来通过本文给大家分享vue项目中公用footer组件底部位置的适配问题,需要的朋友可以参考下
本节主要介绍了如何让footer始终位于页面的最底部不随滚动而滚动,此效果在网页中非常实用,建议大家好好学习哦
谈到“吸底”效果的实现,大家可能较多了解到的是sticky-footer布局,但这个方式大多是用来解决第二种情况的实现。本文将采用以下的三种方案来分别来实现以上这两种效果,并简单实现的原理以及其的适用情况。 容器...
本文主要分享了footer定位页面底部的实例代码,具有很好的参考价值。下面跟着小编一起来看下吧
个网页即使内容很少的情况下,它也始终在页面的底部。否则页面底部将留下大量空白。
粘连底部: 可以随浏览器的大小来自动的调节高度!
html中,固定在底部的代码 这个方法简单好用。 运用这个CSS把DIV永远置于页面的底部 利用绝对定位,然后设置底部距离为0 <style> .footer{ left:0px; position:fixed; width:100%;...<div class="footer">
把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>document</title> &...
思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留footer的高度。 html代码: XML/HTML Code复制内容到剪贴板 <!– 父层 –> <!–...
下面小编就为大家带来一篇利用CSS使footer固定在页面底部的实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的...然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底
很多网站设计一般是两个部分,content + footer,content里面装的是网站主体内容,footer里面展示网站的注册信息等等,因为网站内容高度不定的原因,会出现下面两种情况: 1.内容较少时,这个footer固定在在页面的...