`
flex_莫冲
  • 浏览: 1091808 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

让footer bar置底

阅读更多
参考:
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/
分享到:
评论

相关推荐

    页面布局,实现footer永远在底部

    通过设置flex-direction和align-items属性,我们可以轻松地让footer始终在container的底部。 ```css body, .container { display: flex; flex-direction: column; min-height: 100vh; /* 视口高度 */ } ....

    详解CSS五种方式实现Footer置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部...

    footer始终位居底部

    footer 信息始终居底部对齐,长内容时在内容底部,内容不满一屏始终居底部,纯 css3+html5实现,不兼容低版本浏览器!适用于移动开发页面!

    footer在内容少的时候屏幕底部内容多在内容底部

    footer在内容少的时候屏幕底部内容多在内容底部

    vue项目中公用footer组件底部位置的适配问题

    Footer组件作为常见的页面底部元素,往往需要在多个页面中统一引入。然而,在处理Footer组件的布局时,尤其是面对不同页面内容高度不一致的情况,适配问题就显得尤为重要。本篇文章将深入探讨如何解决Vue项目中公用...

    footer 粘连底部例子

    在IT界,"粘连底部"(Sticky Footer)是一种常见的网页布局技术,它使得页面底部始终固定在视口的底部,即使内容区域不足时也不会上移,而是保持在屏幕的最下方。这种布局方式在现代网页设计中广泛应用,尤其在响应...

    置顶和置底的js

    &lt;footer id="footer" class="sticky-footer"&gt;我是置底的尾部&lt;/footer&gt; &lt;!-- 页面内容 --&gt; window.onscroll = function() { var footer = document.getElementById('footer'); if (window.innerHeight + ...

    footer定位页面底部(代码分享)

    footer定位页面底部的实例代码分享 footer定位页面底部是Web开发中常见的问题,本文将分享一个footer定位页面底部的实例代码,具有很好的参考价值。 一、基础知识 在开始分享代码之前,需要了解一些基本的HTML、...

    详解网站footer沉底效果的三种解决方案

    很多网站设计一般是两个部分,content + footer,content里面装的是网站主体内容,footer里面展示网站的注册信息等等,因为网站内容高度不定的原因,会出现下面两种情况: 1.内容较少时,这个footer固定在在页面的...

    footer 贴在底部的布局实现代码

    使用`position: relative`让`footer`相对于其正常位置定位,然后通过`margin-top: -150px`(与`padding-bottom`相同数值的负值)将其推到页面底部。`footer`的高度也要设置为150px,与`padding-bottom`和`margin-top...

    magento footer no cache,不缓存页面底部footer部分

    然而,在某些情况下,我们可能希望特定部分,比如页面底部的footer,不被缓存,以便于实时显示更新内容或者避免缓存问题。"magento footer no cache"这个主题就是关于如何在Magento系统中实现这一功能的讨论。 在...

    footer美化代码

    在网站设计中,页脚(Footer)通常是一个容易被忽视但至关重要的部分。它不仅提供了网站的基本信息,还可以包含导航链接、版权信息、社交媒体图标、联系表单等元素,为用户提供方便的访问路径。本资源名为"footer...

    CSS实现footer“吸底”效果

    在网页设计中,"CSS实现footer“吸底”效果"是一个常见的需求,目的是让页脚在页面布局中始终保持在屏幕的底部,无论内容区域有多还是少。根据描述,有两种主要的理解方式: 1. **固定底部**:无论内容多少,底部...

    让footer始终位于页面的最底部不随滚动而滚动

    在制作网页的过程中,让页脚(footer)始终位于页面底部是一个常见的需求。特别是在内容较多的页面中,当用户滚动浏览时,页脚仍能固定在浏览器窗口的底部,而不是随着页面内容一起滚动。这种布局效果不仅提升了用户...

    android Fragment实现底部footer Tab

    `Tab`布局则常用于创建一个多页签的用户界面,让用户可以在同一界面下轻松切换不同内容。`android Fragment实现底部footer Tab`是将`Fragment`与底部导航栏(通常由多个Tab组成)结合,以实现应用的主要功能模块切换...

    通用的网站炫酷底部美化代码

    2. **CSS(Cascading Style Sheets)**:为了让底部美观,我们通常需要使用CSS来控制布局、颜色、字体和动画效果。例如,可以设置背景颜色、边框、阴影、透明度等属性,以营造出炫酷的视觉效果。此外,使用Flexbox或...

    利用CSS使footer固定在页面底部的实例代码

    在网页设计中,保持footer始终固定在页面底部是常见的需求,尤其在内容不足填满整个屏幕时,确保...在移动设备上,可能需要改变footer的行为,比如让它在内容滚动到底部时出现,或者保持在屏幕底部但允许内容滚动覆盖。

Global site tag (gtag.js) - Google Analytics