参考:
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/
分享到:
相关推荐
通过设置flex-direction和align-items属性,我们可以轻松地让footer始终在container的底部。 ```css body, .container { display: flex; flex-direction: column; min-height: 100vh; /* 视口高度 */ } ....
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部...
footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!
footer在内容少的时候屏幕底部内容多在内容底部
Footer组件作为常见的页面底部元素,往往需要在多个页面中统一引入。然而,在处理Footer组件的布局时,尤其是面对不同页面内容高度不一致的情况,适配问题就显得尤为重要。本篇文章将深入探讨如何解决Vue项目中公用...
在IT界,"粘连底部"(Sticky Footer)是一种常见的网页布局技术,它使得页面底部始终固定在视口的底部,即使内容区域不足时也不会上移,而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用,尤其在响应...
<footer id="footer" class="sticky-footer">我是置底的尾部</footer> <!-- 页面内容 --> window.onscroll = function() { var footer = document.getElementById('footer'); if (window.innerHeight + ...
很多网站设计一般是两个部分,content + footer,content里面装的是网站主体内容,footer里面展示网站的注册信息等等,因为网站内容高度不定的原因,会出现下面两种情况: 1.内容较少时,这个footer固定在在页面的...
footer定位页面底部的实例代码分享 footer定位页面底部是Web开发中常见的问题,本文将分享一个footer定位页面底部的实例代码,具有很好的参考价值。 一、基础知识 在开始分享代码之前,需要了解一些基本的HTML、...
使用`position: relative`让`footer`相对于其正常位置定位,然后通过`margin-top: -150px`(与`padding-bottom`相同数值的负值)将其推到页面底部。`footer`的高度也要设置为150px,与`padding-bottom`和`margin-top...
然而,在某些情况下,我们可能希望特定部分,比如页面底部的footer,不被缓存,以便于实时显示更新内容或者避免缓存问题。"magento footer no cache"这个主题就是关于如何在Magento系统中实现这一功能的讨论。 在...
在网站设计中,页脚(Footer)通常是一个容易被忽视但至关重要的部分。它不仅提供了网站的基本信息,还可以包含导航链接、版权信息、社交媒体图标、联系表单等元素,为用户提供方便的访问路径。本资源名为"footer...
在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让页脚在页面布局中始终保持在屏幕的底部,无论内容区域有多还是少。根据描述,有两种主要的理解方式: 1. **固定底部**:无论内容多少,底部...
在制作网页的过程中,让页脚(footer)始终位于页面底部是一个常见的需求。特别是在内容较多的页面中,当用户滚动浏览时,页脚仍能固定在浏览器窗口的底部,而不是随着页面内容一起滚动。这种布局效果不仅提升了用户...
`Tab`布局则常用于创建一个多页签的用户界面,让用户可以在同一界面下轻松切换不同内容。`android Fragment实现底部footer Tab`是将`Fragment`与底部导航栏(通常由多个Tab组成)结合,以实现应用的主要功能模块切换...
在网页设计中,保持footer始终固定在页面底部是常见的需求,尤其在内容不足填满整个屏幕时,确保...在移动设备上,可能需要改变footer的行为,比如让它在内容滚动到底部时出现,或者保持在屏幕底部但允许内容滚动覆盖。
在网页设计中,一个美观且功能完备的布局是至关重要的,特别是当涉及到页面底部(Footer)的处理。CSS Sticky Footer布局方案就是为了解决一种常见问题:当页面内容不足以填满整个视口时,底部会留在屏幕的上方,...