CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gerardo
Gerardo

Reputation: 113

Bar that starts at the bottom of the page, scrolls up and then sticks to the top

I am trying to reproduce an idea that I had in mind. It would be in one of those long scrolling page.

The navigation bar would start at the bottom of the initial screen. Once you start scrolling down, it scrolls up at the same rhythm, but once it reaches the top, it stays fixed. If you scroll back to the top, it goes back down to it's original position.

It would be something like this: http://codepen.io/chrissp26/pen/xEAqC that stays fixed at the same number mark as you scroll, and then sticks to the top, unless you scroll back up to the number.

The sample 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>

Upvotes: 2

Views: 114

Answers (1)

Shikkediel
Shikkediel

Reputation: 5205

Something like this, I guess?

Demo

$(function() {

var gate = $(window),
footer = $('#footer'),
space;

gate.on('load resize', function() {

    clearTimeout(redraw);

    var redraw = setTimeout(function() {
    space = gate.height()-footer.outerHeight();
    sortTheFooterOut();
    }, 150);
})
.scroll(sortTheFooterOut);

function sortTheFooterOut() {

    var current = gate.scrollTop(),
    stuck = footer.hasClass('fixed');       

    if (current > space) {
    if (!stuck) {
    footer.addClass('fixed');
    }
    }
    else if (stuck) footer.removeClass('fixed');
}
});

Added a check to apply the class correctly when the user lands on the page when it has a cached scroll position. Especially Opera is stubborn with this - it repositions after the window onload event, hence the timeout. Also included some resize debouncing. For the combined event the timeout was made a bit longer than absolutely necessary for onload by itself.

Before I try to tackle the issue of overlapping content mentioned by rockmandew in the comments, some more info on the exact document structure would be desirable. Wouldn't want to waste time there... or overdo it on the scripting.

Upvotes: 2

Related Questions