JavaScript - 用 Angular 代码替换 jQuery $

Question

我一直使用 jQuery 引用为我的网站制作粘性页脚。现在我正在使用 AngularJS，我也没有必要使用 jQuery。但是，我似乎无法使用我的普通粘性页脚代码，因为 $ 未定义。

HTML:

<h1>Basic plunk!</h1>
<p>If the header above is red, then you know Plunker is working!</p>
<p>The header above should slide right, indicating that jQuery is up and running.</p>
<!-- Put your html here! -->
<div id="page">

    1    
    <br>2    
    <br>3    
    <br>4    
    <br>

</div>
<br>
<footer id="colophon">My footer</footer>

JS:

<script type="text/javascript">
    $(document).ready(function() {
        var bodyHeight = $("body").height();
        var vwptHeight = $(window).height();
        if (vwptHeight > bodyHeight) {
            $("footer#colophon").css("position","absolute").css("bottom",0);
        }
    });
</script>

我怎样才能以 Angular 友好的方式执行上述操作？

这是一个傻瓜:http://plnkr.co/edit/k1EZqwpdXbKhODW4FyeF?p=preview

Answer 1

真正的粘性页脚很容易实现:

footer {
  position: fixed;
  bottom: 0;
}

没有 jQuery，没有 Angular，纯 CSS:http://plnkr.co/edit/W6NcqlRDQ4K6XkGSBEJR?p=preview

---

但是，只有当底部主体边缘和底部窗口边缘之间留有一些空间时才会粘的页脚将需要一个包装器/容器用于主体(不包括页脚)，这将有 100% 的高度“插入”页脚向下.然后，包装器的负底部边距应等于页脚的高度(以免它总是“位于”页面下方)。 Wrapper 的伪元素用于阻止页脚进入内容，以防内容溢出正文。

是这样的:http://plnkr.co/edit/FySWHhIBqYGRQhppN7bA?p=preview

无需 JS 即可调整窗口大小。