Fixed footer met scroll

by Jasper Stevens

HTML

<h1>Een test</h1>
<br><br>
<p>Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
    <p>Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
    <p>Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
<br><br><br><br>
<div id="mobiel-gegevens">
<ul>
<li><a href="mailto:xxxxx" title="Contact">E-mail</a></li>
<li><a href="tel:121345235324">Nummer 1</a></li>
<li><a href="tel:213412">Nummer 2</a></li>
</ul>
</div>

CSS

#mobiel-gegevens {
	display: block;
	opacity: 1.0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 299;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
	-webkit-transition: all .2s cubic-bezier(.23,.47,.32,1);
    transition: all .2s cubic-bezier(.23,.47,.32,1);
	}
	#mobiel-gegevens.close {
	-webkit-transform: translate3d(0,60px,0);
    -moz-transform: translate3d(0,60px,0);
    -ms-transform: translate3d(0,60px,0);
    transform: translate3d(0,60px,0);
    -webkit-transition: all .2s cubic-bezier(.23,.47,.32,1);
    transition: all .2s cubic-bezier(.23,.47,.32,1);
	}
	#mobiel-gegevens ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #717174;
	display: table;
	width: 100%;
	}
	#mobiel-gegevens ul:after {
	clear: both;
	content: '';
	display: block;
	}
	#mobiel-gegevens ul li {
	display: table-cell;
	width: 33.33%;
	text-align: center;
	font-size: 11px;
	border-right: 1px solid #555;
	line-height: 20px;
	background: url(/images/icon-telefoon.png) no-repeat center center;
	background-size: 15px auto;
	box-sizing: border-box;
	}
	#mobiel-gegevens ul li:first-child {
	background: url(/images/icon-email.png) no-repeat center center;
	background-size: 16px auto;
	}
	#mobiel-gegevens ul li:last-child {
	border: 0;
	}
	#mobiel-gegevens ul li a {
	color: #fff;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	padding: 34px 0 6px;
	}

JavaScript

$(window).scroll(function() {
    $('#mobiel-gegevens').addClass( "close", 200, "linear" );
    if (document.body.scrollTop == 0) {
        $('#mobiel-gegevens').removeClass( "close" );
    }
});