I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior.
The idea is for the navigation bar to initially start at the bottom of the screen and then, as you scroll down the page, it smoothly moves up alongside your scroll movement. Once it reaches the top of the screen, it becomes fixed in place. If you scroll back up, the navigation bar seamlessly returns to its original position at the bottom.
Imagine something like this example: http://codepen.io/chrissp26/pen/xEAqC. It sticks to a specific point while scrolling, and then locks to the top until you start scrolling upwards towards that point again.
Below is a snippet of the code:
$(document).on("ready", function() {
sortTheFooterOut();
});
function sortTheFooterOut() {
footer = $("#footer");
$(window).on("scroll", function() {
if ($(window).scrollTop() > 0) {
if (!footer.hasClass("fixed")) {
footer.fadeOut(250, function() {
footer.addClass("fixed").fadeIn(250);
});
}
} else {
footer.fadeOut(250, function() {
footer.removeClass("fixed").fadeIn(250);
});
}
});
}body {
font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
h1 {
font-family: "Segoe UI Light", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
color: #999;
font-weight: normal;
margin: 0;
}
footer {
background: #008aca;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.fixed {
position: fixed;
top: 0;
bottom: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Footer Scroll</h1>
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
<br>21
<br>22
<br>23
<br>24
<br>25
<br>26
<br>27
<br>28
<br>29
<br>30
<br>31
<br>32
<br>33
<br>34
<br>35
<br>36
<br>37
<br>38
<br>39
<br>40
<br>
<footer id="footer">Footer</footer>