jQuery粘页脚

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

来源

2012-03-26 James Charless Dickinson

粘性如何？你想要修复粘性还是文件粘性后？ – 2012-03-26 19:41:58

@KyleMacey页面底部粘滞。 :) – 2012-03-26 19:42:56

你试过类似'footer {position：fixed; bottom：0; left：0; right：0; }'在你的css当然 – SpYk3HH 2012-03-26 19:45:20

好的。 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（）函数可能无法正常工作，所以要小心填充和利润率（只需将margin/padding值添加到'footer_height'，你应该没问题）。

来源

2012-03-26 20:01:18

我实现了该脚本，它的工作原理。有点。你能帮我添加填充+边距值，因为它仍然隐藏了一些页脚，现在整个页面向下移动50个像素... o.o – 2012-03-26 20:14:25

你的脚本不工作，因为“;” 'px'后。首先修复;） – 2012-03-26 20:17:25

我做到了。它仍然不起作用。 – 2012-03-26 20:19:51

我刚刚创建具有粘性的页脚中的网页...

这与页眉和页脚是每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 
}

来源

2012-03-26 20:01:56 Scot

如果我正确地理解了你，就没有必要使用jQuery。平原和简单...

http://www.cssstickyfooter.com/

来源

2012-03-26 20:07:32 gearsdigital

）上帝，这里有很多人无法阅读，就像我在问题中说过的，页脚没有动态高度，这就是为什么我需要jQuery，对不起，如果我是粗鲁的，但这是我 – 2012-03-26 20:11:52

示例中的页脚高度正好为180px，似乎已经足够固定了 – gearsdigital 2012-03-26 20:16:30

如果3个人不明白您的问题，您应该澄清您的问题并进行一些文本格式化，因此用户将阅读你的问题，因为它更容易阅读。 – gearsdigital 2012-03-26 20:17:38

我就离开这个位置

<!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>

来源

2014-06-01 11:30:11

这是一个很好的解决方案！即插即用:-)这个脚本来自哪里？你有Github链接吗？ – maartenmachiels 2015-02-15 19:30:50

https://github.com/evgeniy-trebin/jQuery-Sticky-footer – 2015-05-07 10:42:59

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>

只要尝试一下，因为它在我的页面中工作正常。

来源

2015-05-04 12:51:28 VenRaj

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

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

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

谢谢你Stackoverflow。

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

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

 
}); //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 { 
 
\t position: absolute; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t background: #ddd; */ 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 100%; 
 
\t text-align: center;} 
 
    
 
    .dim-fixed { 
 
\t position: fixed; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t background: #ddd; */ 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 100%; 
 
\t 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

在这两个演示，额外的页脚的菜单应该坚持只以上页脚，与汽车动力高度，出于某种原因，它的展位没有shoiwng演示，但如果你检查日志，你会发现我在说什么，它的100％在我的网站上正常工作。

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

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

Tariq

来源

2017-12-14 23:25:19

jQuery粘页脚

回答

相关问题