Make footer move up when content appears at the bottom

user_10640099 0
Viewed 112

I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?

For styling I'm using SASS

<footer>
    <div className="social-icons">
        <div className="icon">
            <a href="http://fb.me">
                <i className="fab fa-facebook-f"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://twitter.com/">
                <i className="fab fa-twitter"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://www.linkedin.com/">
                <i className="fab fa-linkedin-in"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://plus.google.com/discover">
                <i className="fab fa-google-plus-g"></i>
            </a>
        </div>
    </div>
    <div class="arrow"></div>
</footer>

sass:

footer
    position: fixed
    z-index: 10
    width: 100vw
    bottom: 0
    display: flex
    justify-content: space-between
    box-sizing: border-box
    flex-wrap: nowrap
    padding: 0 6.25vw  2.6042vw 6.35vw

The content which has to be loaded at the bottom and move the footer up:

<div class="content"></div>

sass

.content 
    position: absolute
    bottom: 0
    z-index: 30
    height: 6.25vw
    width: 100%
    background-color: $white

I want footer to ALWAYS stick to the bottom except when content moves it up

sass css html javascript
1 Answers

See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.

body{
  width: 100vw;
  margin:0;
  padding:0;
}
.upper-body{
    display: flex;
    width: 100%;
}
.footer-content{
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    width: 100vw;
    bottom: 0;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background-color: yellow;
}
footer{
    position: relative;
    z-index: 10;
    width: 100vw;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    padding: 0 6.25vw  2.6042vw 6.35vw;
    background-color: yellow;
}
.content{
    display: flex;
    position: relative;
    bottom: 0;
    z-index: 2;
    height: 6.25vw;
    width: 100vw;
    background-color: gray;
}
    <div class="upper-body">
    </div>
    <div class="footer-content">
        <footer>
            <div className="social-icons">
                <div className="icon">
                    <a href="http://fb.me">
                        <i className="fab fa-facebook-f"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://twitter.com/">
                        <i className="fab fa-twitter"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://www.linkedin.com/">
                        <i className="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://plus.google.com/discover">
                        <i className="fab fa-google-plus-g"></i>
                    </a>
                </div>
            </div>
            <div class="arrow"></div>
        </footer>
        <div class="content">
        </div>
    </div>

user_55388190
Related