Rails 4 和 Foundation 5 - 粘页脚？

Question

所以我一直使用静态页面，直到我决定迁移到 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 部署中。

Answer 1

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

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