Rails 4 和 Foundation 5 - 粘页脚？

Posted 2023-03-06

【中文标题】Rails 4 和 Foundation 5 - 粘页脚？

【英文标题】：Rails 4 and Foundation 5 - Sticky Footer?

【发布时间】：2015-10-02 07:01:50

【问题描述】：

所以我一直使用静态页面，直到我决定迁移到 Rails 以在我的网络应用程序中使用。

我能够使用以下 codePen 有效地创建一个粘性页脚：

http://codepen.io/aetles/pen/jAdzw

$(function() $(document).foundation(); );

window.onload = function() 
  stickyFooter();
;

function checkForDOMChange() 
  stickyFooter();

//check for resize event if not IE 9 or greater
window.onresize = function() 
  stickyFooter();

//lets get the marginTop for the <footer>
function getCSS(element, property) 

  var elem = document.getElementsByTagName(element)[0];
  var css = null;
  if (elem.currentStyle) 
    css = elem.currentStyle[property];
   else if (window.getComputedStyle) 
  css = document.defaultView.getComputedStyle(elem, null).
  getPropertyValue(property);
  
  return css;


function stickyFooter() 
  console.log("sticky footer is firing");
  if (document.getElementsByTagName("footer")[0].getAttribute("style") != null) 
    document.getElementsByTagName("footer")[0].removeAttribute("style");
   
  if (window.innerHeight != document.body.offsetHeight) 
    var offset = window.innerHeight - document.body.offsetHeight;
    var current = getCSS("footer", "margin-top");
    if (isNaN(current) == true) 
      document.getElementsByTagName("footer")[0].setAttribute("style","margin-top:0px;");
      current = 0;
     else 
      current = parseInt(current);
    
    if (current+offset > parseInt(getCSS("footer", "margin-top")))       
      document.getElementsByTagName("footer")[0].setAttribute("style","margin-top:"+(current+offset)+"px;");
    
  

但是，当我将它部署到使用 Rails 的实时应用程序中时，事件本身会被触发（我使用 console.log 消息进行了测试），但它实际上并没有编辑页脚的位置。

（在下一页查看控制台） https://still-plains-7660.herokuapp.com/

因为我为页脚本身使用了部分，可能是 Rails 不知道实际移动什么？呈现页面上的源代码看起来应该如此。

有没有更优雅的宝石或解决方案我可以利用来制作一个 没有 具有固定高度的粘性页脚？ （我需要它响应）。

考虑到它在静态页面上运行良好，我确信我可以调整一些东西，但我似乎无法弄清楚为什么它不会坚持在 Rails 部署中。

【参考方案1】：

我不记得我在使用 Foundation 创建粘性页脚时到底做了什么。但我想我为你找到了一些解决方案。

https://github.com/coreysyms/foundationStickyFooter http://foundation.zurb.com/forum/posts/629-sticky-footer