Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Jul 17, 2018

Embed
What would you like to do?
Really simple fixed footer reveal with a tiny bit of jQuery
<main></main>
<footer>
<div class="footer__inner">
<div class="logo">Logo</div>
<nav>
<a href="">© Company name</a>
<div class="social">
<a href="">F</a>
<a href="">T</a>
<a href="">In</a>
<a href="">@</a>
</div>
</nav>
</div>
</footer>
var logoElement = $('footer .logo');
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(logoElement).addClass('show');
} else if($(logoElement).hasClass('show') && $(window).scrollTop() + $(window).height() > $(document).height() - 150) {
$(logoElement).removeClass('show');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$brand-primary: #92B8C3;
$brand-secondary: #FF30AA;
$brand-dark: #fff;
$brand-light: #fff;
$brand-grey: #344;
* {
box-sizing: border-box;
}
main {
height: 100vh;
}
footer {
height: 300px;
background-color: $brand-primary;
position: relative;
.footer__inner {
position: fixed;
bottom: 0;
left: 0;
padding: 40px 60px;
width: 100%;
* {
color: $brand-light;
}
}
.logo {
text-align: center;
text-transform: uppercase;
font-size: 40px;
margin-bottom: 80px;
transform: translateY(50px);
opacity: 0;
transition: transform, opacity;
transition-duration: .8s;
transition-timing-function: ease;
&.show{
transform: translateY(0);
opacity: 1;
}
}
nav {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.