This is not to be confused with a sticky footer, which is easy to implement using CSS.
It is available through NPM:
npm install ng-flush
Check out the fiddle!
flush.min.js in your build or directly with a
<script> tag and require the module in your module definition:
To flush an element to the bottom of its closest positioned parent:
The directive's approach is to set the following inline styles if the element does not naturally reach the bottom:
This means that the element will be flushed to the bottom of its closest positioned parent, regardless of whether it is the
window or another element.
Typically this is best-used on an element which is the last visible child of its closest positioned parent. Otherwise, the children would appear to the user to change order when the flush is toggled - it would be below its siblings when flushed, and among its siblings when positioned naturally.
The directive watches the
offsetHeight of the closest positioned parent. If either value changes, the element will be re-flushed.
Note that the directive attempts to use
requestAnimationFrameor its browser-specific variants (if they are available) to watch the height values of the parent. This is because using
$scope.$watchto keep an eye on the height is not fast enough to catch changes during animations, e.g. expansion and collapse of content within the parent. As a result, there is a slight visual delay when animations cause the parent to change size when
$scope.$watchis used. However, since many browsers still do not implement
requestAnimationFrameor an equivalent, the directive falls back gracefully and uses
$scope.$watchinstead when animation functions are not available.