# Sticking footer to the bottom

**URL:** <https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214>\
**Category:** UX\
**Created:** [October 7, 2015, 7:20am UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214 "2015-10-07T07:20:09Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [October 8, 2015, 8:18pm UTC](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214/4 "2015-10-08T20:18:34Z")

</div>

I assume you’re talking about a custom footer added in the admin\>customize section. It seems that the only way to do it on a Discourse forum is with javascript. This mostly works, but it would be great if someone could correct the way I am firing the javascript function. The way it’s being done here can’t be very efficient.

* * *

Edit: this is an improved version. Unless someone suggests a more obvious way to do this, I’ll make this into a plugin.

given this as a footer:

```html
<div id="sticky-footer">
    <div class="wrap">
        <h3>this is the custom footer</h3>  
    </div>
</div>

```

```css
#sticky-footer {
    position: static;
    color: #fff;
    background: #CD5C5C;
    // In case the window with a static footer is resized downwards
    box-shadow: 0 300px 0 300px #CD5C5C;
    height: 120px;
}

```

This will fix it to the bottom when there isn’t enough content to push it there.

```js
<script>
    var stickFooter = function() {
        var $footer = $('#sticky-footer'),
            footerHeight = $footer.outerHeight(),
            footerOffset = $footer.offset(),
            footerBottom;
            
            if (footerOffset) {
                footerBottom = footerHeight + footerOffset.top;

                if (footerBottom <= $(window).height()) {
                    $footer.css({
                        'position': 'fixed',
                        'left': 0,
                        'right': 0,
                        'bottom': 0
                    });
                    // In case the window is resized upwards
                    $('#main').css('padding-bottom', footerHeight + "px");
                } else {
                    $footer.css('position', 'static');
                    $('#main').css('padding-bottom', 0);
                }
            }
    };

    Discourse.ApplicationView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
    
    Discourse.DiscoveryCategorysView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
    
    Discourse.DiscoveryTopicsView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });

    Discourse.CloakedView.reopen({
        didInsertElement: function() {
            this._super();
            stickFooter();
        },
        
        pathChanged: function() {
            Ember.run.scheduleOnce('afterRender', this, function() {
                stickFooter();
            });
        }.observes('controller.currentPath', 'controller.model')
    });
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/sticking-footer-to-the-bottom/34214)._