jQuery 粘性页脚答案

【问题标题】：jQuery sticky footerjQuery 粘性页脚
【发布时间】：2012-04-10 08:05:40
【问题描述】：

詹姆斯在这里！我已经尝试了大约两个小时来获得一个粘性页脚，但我似乎一直在搞乱 CSS。我正在寻找 jQuery 可以处理的脚本。我了解大多数脚本的工作原理（这令人惊讶，因为我只是在学习），但无论页脚的高度是多少，我都需要脚本工作，因为它没有在我页面的 CSS 文件。任何人都可以为粘性页脚提供工作脚本吗？我希望页脚本身始终位于页面底部，但不是固定位置。内容元素为#posts，页脚区域为ID为#bottom的元素。这是一个页面示例：JTB Permalink Page

【问题讨论】：

粘性如何？您要固定置顶还是文档后置顶？
@KyleMacey 页面底部置顶。 :)
css position:fixed 会不起作用吗？为什么你需要 jQuery？
你有没有在你的css中尝试过类似footer { position: fixed;bottom: 0;left: 0;right: 0; } 的东西
因为没有内容占据页面，所以文档告诉body标签在内容结束的地方结束，将页脚放在页面的中间而不是底部。

标签： jquery css footer sticky

【解决方案1】：

好的。 HTML：

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS：

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

jQuery:

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

我必须警告你，jquery .height() 函数可能无法正常工作，所以要小心填充和边距（只需将边距/填充值添加到 'footer_height' 就可以了）。

【讨论】：

我实现了这个脚本，它可以工作。有点。你能帮我添加 padding + margin 值吗，因为它仍然隐藏了一些页脚，现在整个页面向下移动了 50 像素...o.o
您的脚本因“;”而无法运行在'px'之后。先解决这个问题；）
var 页脚 = $("#bottom").height(); /* 你有#footer 但你的网站没有#footer */
我解决了这个问题。傻我！ :P 这不应该工作吗： $("#posts").css('padding-bottom', footer + 50 + 'px');
应该的。请注意 $(document).ready() 上未准备好的 facebook 按钮。也许你应该用 $(window).load() 改变它，所以高度将在 facebook 按钮加载后计算。

【解决方案2】：

我就把这个留在这里

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Sticky footer</title>
    <!-- include jQuery -->
    <script src="jquery-2.1.0.min.js"></script>
    <!-- include our scripts -->
    <script type="text/javascript">
      $(function () {
        // sticky footer
        (function () {
          var
            $window = $(window),
            $body   = $(document.body),
            $footer = $("#footer"),
            condition = false,
            resizing  = false,
            interval  = 500
            ;

          function positionFooter() {
            if (resizing) {
              setTimeout(function(){
                if(resizing == false) {
                  positionFooter();
                }
              }, interval);
              return true;
            }
            var
              footer_position = $footer.css('position'),
              body_height   = $body.height(),
              window_height = $window.height(),
              footer_height = $footer.outerHeight();

            if (footer_position == 'absolute') {
              condition = body_height + footer_height < window_height
            }
            else {
              condition = body_height < window_height
            }

            if (condition) {
              $footer.css('position', 'absolute').css('bottom', 0);
            }
            else {
              $footer.css('position', 'relative');
            }

            resizing = setTimeout(function () {
              resizing = false;
            }, interval);

            return true;
          }

          $window.bind("load", function () {
            positionFooter()
          });

          $window.resize(positionFooter);

        }());
      });
    </script>

    <style>
      body {
        text-align: center;
      }

      #header {
        width: 100%;
        background-color: green;
        color: white;
        height: 100px;
      }

      #footer {
        width: 100%;
        background-color: blue;
        color: white;
      }
    </style>
  </head>

  <body>
    <header id='header'>
      Header content
    </header>
    <div id='content'>
      Content is here!
    </div>
    <footer id='footer'>
      Sticky footer content
    </footer>
  </body>
</html>

【讨论】：

这是一个很好的解决方案！即插即用 :-) 这个脚本来自哪里？你有 Github 链接吗？

【解决方案3】：

JQuery

function getWndowSize()
{
    var windows_height=$(windows).height();
    var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
    $("#wrapper").css({'min-Height' : current_height});
}

代码：

<body onload="getWndowSize()">

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

试试吧。因为它在我的页面上运行良好。

【讨论】：

【解决方案4】：

我刚刚创建了一个带有粘性页脚的页面...

这将创建一个页面，其页眉和页脚各为 55 像素，并且页脚紧贴在浏览器窗口的最底部

这是我最终做的：

HTML：

<!--main header container-->
<div id="header" class="ui-frame ui-frame-header"></div>

<!--main container for app-->
<div id="content" class="ui-mainContent">
    This is a place holder for my content
</div>

<!--//main footer container-->
<div id="footer" class="ui-frame ui-frame-footer"></div>

CSS：

.ui-frame {
    width: 100%;
    height: 55px;
    background: #000000;
    font-family: Segoe UI, Arial, sans-serif;
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

.ui-frame-header {
   position: absolute;
   top: 0;
}

.ui-mainContent {
    position: absolute;
    top: 55px;
    bottom: 55px;
    background: #ffffff;
    font-family: Segoe UI, Arial, sans-serif;
}

.ui-frame-footer {
    position: absolute;
    bottom: 0
}

【讨论】：

【解决方案5】：

如果我理解正确，则不需要 jQuery。简单明了...

http://www.cssstickyfooter.com/

【讨论】：

天啊，这里好多人看不懂。就像我在问题中所说的那样，页脚没有动态高度，这就是我需要 jQuery 的原因。对不起，如果我很粗鲁，但我想这是第三次了。
示例中的页脚正好是 180px 高度。它似乎已经足够修复了。
如果超过 3 个人不理解您的问题，您应该澄清您的问题并进行一些文本格式化。所以用户会阅读你的问题，因为它更容易阅读。
你真的应该更深入地看看示例页面；）

【解决方案6】：

我知道回答这个问题为时已晚，但这对我来说也很困难，我在这个很棒的地方找到了一些东西，我通过了这个问题，我很想分享一个对我有很大帮助的代码。

您可以在下面的演示中找到它。

我希望这可以帮助某人，因为我在这里总是得到其他人的帮助。

谢谢 Stackoverflow。

$(document).ready(function(){
$(window).on("scroll", function() {
		var footer_height = $( "#footer" ).outerHeight();
		var dim_height = $(".dim").outerHeight();
		var scrollHeight = $(document).height();
		var scrollPosition = $(window).height() + $(window).scrollTop();
		if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
			// when scroll to bottom of the page
			$(".dim").removeClass("dim-fixed");
			$(".dim").addClass("dim-static").css({
			'bottom': footer_height,
			});

		}else{
			$(".dim").removeClass("dim-static");
			$(".dim").addClass("dim-fixed").css({'bottom': 0,});
		}
});

}); //Document Ready function end

body {
    margin: 0px auto;
    background: #ffffff;
    font-size: 14px;
    color: #444444;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.point1 {
    width: 100%;
    margin: 0 auto;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: " ";    
    }
#footer {
    z-index: 104;
    display: block;
}

footer.page-footer {
    width: 100%;
    background: #333333;
    color: #fff;
    border-top: 2px white solid;
    position: absolute;
    left: 0;
    }

footer.page-footer > div {
    padding: 30px 0 40px;
    min-height: 162px;
    margin: 0 auto;
    position: relative;
}
nav.footer-menu {
    position: relative;
    float: left;
    width: 75%;
    padding-right: 30px;
    display: block;
}

nav.footer-menu > ul {
    margin-top: -3px;
}
body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li {
    list-style: none;
}
nav.footer-menu > ul > li {
    display: inline-block;
    width: 33.33%;
    margin: 0;
    padding: 0;
    border: 0;
}
nav.footer-menu a {
    text-decoration: none;
    color:#fefefe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.071em;
    padding: 0 10px 8px;
    vertical-align: top;
    display: inline-block;
}

.footer-data {
    font-size: 0.929em;
    color: #a0a0a0;
    overflow: hidden;
}

/* footer extra menu container*/
.dim-static  {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;}
  
  .dim-fixed {
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<section>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>

</section>
<div class="dim"> Full width Footer menu </div>
<footer class="page-footer" id="footer">
  <div class="point1 clearfix">
    <nav class="footer-menu">
      <ul>
        <li><a class="active" title="stackoverflow.com" href="#">Home</a></li>
        <li><a rel="nofollow" title="Add a New Listing" href="#add-listing.html">Add a Listing</a></li>
        <li><a title="Search for property" href="#search.html">Search</a></li>
        <li><a rel="nofollow" title="About Us" href="#about-us.html">About Us</a></li>
        <li><a title="Contact us" href="#contact-us.html">Contact Us</a></li>
        <li><a title="My Favorites List" href="#my-favorites.html">Favorites</a></li>
        <li><a title="Terms of use" href="#terms-of-use.html">Terms of Use</a></li>
        <li><a title="Privacy Policy" href="#privacy-policy.html">Privacy Policy</a></li>
        <li><a title="FAQs" href="#faqs.html">FAQs</a></li><li><a title="Refund Policy" href="#refund-policy.html">Refund Policy</a></li>
      </ul>
    </nav>
    <div class="footer-data">
      <div class="icons">
        <a class="rss" title="Subscribe to RSS-feed" href="#" target="_blank"></a>
        <a class="facebook" target="_blank" title="Join us on Facebook" href="#"></a>
        <a class="twitter" target="_blank" title="Join us on Twitter" href="#"></a>
      </div>

      <div>
        © 2017, powered by <a title="stackoverflow.com" href="http://stackoverflow.com/">stackoverflow.com</a>
      </div>
    </div>
  </div>
</footer>
</body>

也在这里，jsfiddle

在两个演示中，Extra footer 菜单应该只粘贴在页脚上方，具有自动动态高度，由于某种原因，它没有显示在展台演示中，但如果你查看日志，你会发现我在说什么，并且它在我的网站上 100% 运行良好。

你可以用它做很多事情，也许你会添加额外的子页脚菜单，或者你会根据你的文档滚动状态将你的页脚转换为固定/静态，你也可以玩，你只会有静态/以非常好的方式固定菜单。

我希望这对其他人有所帮助，因为我总是从这里得到帮助。再次感谢大家。

塔里克

【讨论】：